时间戳

首页 > 解决方案 > 为 .css 中的不同图像设置单独的尺寸

html - 为 .css 中的不同图像设置单独的尺寸

问题描述

我知道这是非常基本的，但我试图弄清楚，如果我有很多图像要设置大小.css，如何为不同的图像提供不同的大小。.html.css

如果我有一张图片的尺寸myimg1.png：

<img src="assets/image/myimg1.png"/>

在.css：

img{
  width: 212px;
  height: 95px;
}

那么我不能直接给另一个不同的尺寸myimg2.png：

<img src="assets/image/myimg2.png" width="65" height="72" />

指南或示例会很有用

标签： htmlcss

解决方案

您没有以正确的方式使用 CSS 选择器。

img {

}

意味着您将样式应用于所有<img>HTML 标记。

要区分不同的<img>标签，您需要使用 CSS 类：

<img src="assets/image/myimg1.png" class="imgOne" />
<img src="assets/image/myimg2.png" class="imgTwo" /> 

.imgOne {
  width: 212px;
  height: 95px;
}

.imgTwo {
  width: 65px;
  height: 72px;
}

在您的示例中，HTML 元素的属性被 CSS选择width器覆盖。heightimg

您可以通过使用上面提到的 CSS 或将 HTML 更改为：

<img src="assets/image/myimg2.png" style="width: 65px; height: 72px;" />

属性的内容style基本上是 CSS，并且将优先于 CSS 文件中定义的内容。

推荐阅读