Question

编辑：我意识到，因为我没有给出完整的代码（我写了很多，因为它是为了最后的项目，但我只是遇到了这个小问题），我的问题有点混乱。下面的答案非常好，但我意识到，当我从查询中编译图像数据时，我为它分配了一个类，所以我只是用它来编辑，从下面的答案中绘制来调整图像大小。谢谢！

我正在做这个项目，我们正在从查询中解析数据。我目前正在使用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吗？具体来说，我只想编辑图标图像的大小。

＆＃13;

<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>

＆＃13;

此图片未放置在我的HTML中。此图像变量的最初目的是将查询中的图像数据保存到数据库中。如果图像不存在，我想将其替换为我在文件中的图像＆＃34; blacksoundcloud.png。＆＃34;虽然我可以将其上传到我的网页，但我不知道如何编辑它的大小。

希望这是足够的代码。

目前看来是这样的：

Answer 1

你的问题有点难以理解。

如果您无法将太大的图像编辑为合适的尺寸（这将是理想的），我会尝试其中一种：

header img {
  width: 100px !important; /* or the size you require */
  height: 100px; /* or the size you require */
}

或者如果你必须真正摆脱原始图像：

header img {
  display: none;
}
header:before {
  content: '';
  display: block;
  height: 100px; /* or the size you require */
  width: 100px; /* or the size you require */
  background: url(assets/soundcloud.png) 0 0 no-repeat;
  background-size: cover;
}

Answer 2

据我了解，如果以下代码没有任何图片，您将更改src。

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

您可以从CSS修复宽度和高度。您只能定位具有src <img>的{{1}}元素，如下所示。

assets/blacksoundcloud.png

上面的代码会将图像宽度和高度固定为100px，即使您上传任意大小的图像也是如此。请看下面的代码片段，图片的原始大小约为336x224。你现在可以查看它的外观。

＆＃13;

img#main-logo[src="assets/blacksoundcloud.png"] {
  width:100px;
  height:100px;
}

＆＃13;

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;
}

＆＃13;

如果您想以宽高比显示图片，请使用下面的<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

请看下面的代码段，它是如何显示图片的，你可以比较一个，然后决定你要去哪一个。

＆＃13;

#main-logo {
  max-width: 100px;
  max-height: 100px;
}

＆＃13;

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;
}

＆＃13;

Answer 3

在回答OP关于使用CSS编辑图像的问题时，虽然无法使用CSS更改实际图像，但您可以通过影响其样式属性来使用它来转换图像的显示方式，例如它的宽度和高度。

＆＃13;

img#main-logo {
  width: 239px;
  height: 114px;
  content: url("https://i.stack.imgur.com/Bw8h1.png");
}

＆＃13;

<header>
  <img id="main-logo" src="doesNotExist.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>

＆＃13;

使用CSS更改图像的宽度或高度非常简单;你只需要指定宽度和高度的值。如果您未能在HTML中提供有效的src属性，您以前可能会使用JavaScript为图像的source属性赋值;仅CSS就不够了。现在使用CSS 3，您可以专门用CSS替换图像，将content属性设置为图像的URL。

注意：在HTML中设置了id属性的每个元素都应该是唯一的。如果两个图像具有相同的类，您仍然可以利用CSS定位src属性，如下所示：

＆＃13;

img.m-logo[src="https://i.stack.imgur.com/Bw8h1.png"] {
  max-width: 100px;
  max-height: 100px;
  vertical-align:top;
}

img.m-logo[src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Giant_leopard_moth_hypercompe_scribonia_3.jpg/339px-Giant_leopard_moth_hypercompe_scribonia_3.jpg"] {
  max-width: 150px;
  max-height: 200px;
  vertical-align:top;
}

＆＃13;

<img class="m-logo" src="https://i.stack.imgur.com/Bw8h1.png">
<img class="m-logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Giant_leopard_moth_hypercompe_scribonia_3.jpg/339px-Giant_leopard_moth_hypercompe_scribonia_3.jpg">

＆＃13;

我通过JS上传了图片。我如何改变css？

3 个答案: