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

我知道CSS能够使用以下技术调整图像大小：

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

---

这很好，但问题是它适用于页面上的所有内容，当我希望某些图像限制为一个大小（比如宽度=50px）而其他图像限制为600px时。我可以在CSS中这样做吗，或者我需要在JS中查看吗？

您可以使用CSS选择器以特定元素为目标，通常是使用

id

的特定元素，或者使用

class

的具有类似特征的许多元素，然而，CSS允许创建相当复杂的规则，以允许您针对单个特定元素或元素子集

HTML

---

您有两种方法，一种是在div标记内的HTML上给出（如果您正在使用它），如下所示

 <div class="usr_img_div">
                <img src="~/Images/username.png" style="height: 100%; width: 100%; background-color: #FFFFFF;" />
            </div>

.usr_img_div {
height: 80%;
width: 12%;
float: left;
}

---

通过这样做，它将采取用户的高度和宽度，并适合确切的空间，您需要在img src使用的高度和宽度是100%；该图像的清晰度将保持不变，不会出现模糊

为要调整大小的图像定义一个类或id属性。您无需提及高度，因为它会自动调整。例如：

<img src="image.jpg" class="test1" />
<img src="image.jpg" class="test2" />

<style>
.test1
{
width:50px;
}

.test2
{
width:650px;
}

</style>

.test1
{
宽度：50px；
}
.test2
{
宽度：650px；
}

您可以使用CSS，但在使用px时要小心，因为容器可能小于600px（例如）。我建议您在这种情况下使用%。

---

所以你不需要JS。CSS已经足够了

在CSS中，试着学习如何使用id和类选择器。@N.Soong-我添加了一些链接，我建议您从这些链接开始，您的问题的答案可能过于广泛，不适用于SO的范围

.usr_img_div {
height: 80%;
width: 12%;
float: left;
}

<img src="image.jpg" class="test1" />
<img src="image.jpg" class="test2" />

<style>
.test1
{
width:50px;
}

.test2
{
width:650px;
}

</style>