编辑:我意识到,因为我没有给出完整的代码(因为这是一个最终项目,所以我写了很多东西,但我只是对这件小事有疑问),我的问题有点令人困惑。下面的答案非常好,但是我意识到,当我从查询中编译图像数据时,我为它分配了一个类,因此我只是使用该类进行编辑,并从下面的答案中绘制图像以调整图像大小。谢谢!

我正在做这个项目,我们从查询中解析数据。我目前正在使用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”中的该图像替换它。虽然可以将其上传到我的网页中,但我不知道如何编辑它的大小。

希望这是足够的代码。

当前是这样的:javascript - 我通过JS上传了图片。如何更改CSS?-LMLPHP

最佳答案

据我了解,如果没有任何图像,您将更改以下代码的src

<img id="main-logo" src="assets/soundcloud.png">

您可以从CSS固定宽度和高度。您只能定位具有src <img>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-widthmax-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">

09-12 02:04