编辑:我意识到因为我没有给出完整的代码(我写了很多,因为它是为了一个最终元素,但我只是对这个小问题有疑问),我的问题有点令人困惑。下面的答案非常好,但我意识到当我从查询中编译图像数据时,我给它分配了一个类,所以我只是用它来编辑,从下面的答案中绘制来调整图像的大小。谢谢!
我正在做这个元素,我们从查询中解析数据。我目前正在使用 SoundCloud Stratus API 创建一个非常基本的 soundcloud 网页。
$.each(data.slice(0,10), function(index, value) {
var icon = value.artwork_url;
if (icon == null) {
icon = 'assets/blacksoundcloud.png'
}
};
有什么方法可以在 CSS 中编辑图像 blacksoundcloud.png 吗?具体来说,我只想编辑图标图像的大小。
<header>
<img id="main-logo" src="assets/soundcloud.png">
</header>
<section class="search">
<input type="text" id="input" placeholder="Search for a song or artist">
<button id="searchButton">Search</button>
</section>
<section>
<div class="results-playlist"></div>
</section>
<!-- <script src=“http://code.jquery.com/jquery-1.7.2.js“></script> -->
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="startercode_HW4_skeleton.js"></script>
<script src=“http://stratus.sc/stratus.js“></script>
这张图片没有放在我的 HTML 中。此图像变量的最初目的是将查询中的图像数据保存到数据库中。如果图像不存在,我想用文件“blacksoundcloud.png”中的这张图像替换它。虽然我可以将它上传到我的网页,但我不知道如何编辑它的大小。
希望这是足够的代码。
最佳答案
据我了解,您将更改 src
如果没有任何图像,则执行以下代码。
<img id="main-logo" src="assets/soundcloud.png">
您可以通过 CSS 固定宽度和高度。您只能定位 <img>
具有 src assets/blacksoundcloud.png
的元素如下所示。
img#main-logo[src="assets/blacksoundcloud.png"] {
width:100px;
height:100px;
}
以上代码会将图像的宽度和高度固定为 100px,即使您上传任何尺寸的图像也是如此。看下面的代码片段,图像的原始大小约为 336x224。您可以查看它现在的样子。
img#main-logo[src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg"] {
width:100px;
height:100px;
}
<img id="main-logo" src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg">
<img id="main-logo" src="assets/testsoundcloud.png">
如果您想以宽高比显示图像,请使用 max-width
或 max-height
属性如下。
#main-logo {
max-width: 100px;
max-height: 100px;
}
看看下面的代码片段,它是如何显示图像的,您可以比较两者,然后决定要使用哪一个。
img#main-logo[src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg"] {
max-width:100px;
max-height:100px;
}
<img id="main-logo" src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg">
<img id="main-logo" src="assets/testsoundcloud.png">
关于javascript - 我通过JS上传图片。我如何改变CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48921436/