javascript - CSS 设置特定区域的最大图像大小

Question

我知道使用 CSS 可以使用以下技术调整图像大小:

img {width:100%; height: auto; }
img {max-width: 600px}

这很好用，但问题是它适用于页面上的所有内容，当我希望某些图像限制为一种尺寸(比如宽度=50 像素)而其他图像最大为 600 像素时。我可以在 CSS 中执行此操作，还是需要为此查看 JS？

Answer 1

您可以使用 CSS 选择器定位特定元素，通常是使用 id 的特定元素或使用 class 的许多具有相似特征的元素，但是 CSS 允许相当复杂的规则创建以允许您定位单个特定元素或元素子集。

HTML

<img class='large' src='123.png' />
<img class='small' src='456.png' />
<img class='unique' src='789.png' />

CSS

img {
    width:100%;
    height: auto;
}
.large {
    max-width: 600px;
}
.small {
    max-width: 300px;
}
#unique {
    max-width: 1024px;
}

Getting started with CSS from MDN

more on CSS selectors from MDN