如何使用 css 将类分配给 html 图像？

【问题标题】：How do i assign a class to a html image with css?如何使用 css 将类分配给 html 图像？
【发布时间】：2021-10-03 22:27:24
【问题描述】：

这是html部分：

.bild{
  height:100px;
  width: 100px;
}

<div class = "wrapper">
    <img class = "bild" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="the google logo" > 
</div>

他们似乎并不“理解”对方，因为形象没有改变。

【问题讨论】：

这似乎按预期工作，你希望它做什么？

标签： html css google-chrome web styles

【解决方案1】：

您的 HTML 中有一些额外的空格，但输出仍然按照您的 CSS 中定义的方式工作。在这种情况下，我建议指定所需的宽度或高度，并在另一个上使用 auto。

.bild {
  height: auto;
  width: 200px;
}

<div class="wrapper">
    <img class="bild" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="the google logo"> 
</div>

【讨论】：

【解决方案2】：

带有您提供的图片的示例有效。可能是您没有注意到任何差异。这是另一个使用类为文本着色的示例：

.color {
  color: red;
}

.colorHeader {
  color: red;
}

<p class="color">This text is red!</p>

<h1 class="colorHeader">This header is red!</h1>

你也可以改变这个：

.color {
  color: red;
}

.colorHeader {
  color: red;
}

到这里：

.color, .colorHeader {
  color: red;
}

【讨论】：