Question

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

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

这很好用，但问题在于它适用于页面上的所有，当我希望某些图像限制为一个尺寸（例如宽度= 50px）而其他尺寸限制为600px时。我可以在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

Answer 2

你有2种方法，一种你可以在div标签内给出HTML（如果你正在使用它），就像这样

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

您可以将高度和宽度设置为所需的大小，并确保必须像这样定义div（usr_img_div）

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

通过这样做，它将占用用户的高度和宽度，并适合您需要在img src中使用的精确空间，其中高度和宽度为100％;该图像的清晰度将保持不变模糊

Answer 3

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

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

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

.test2
{
width:650px;
}

</style>

Answer 4

您可以使用CSS执行此操作，但在使用px时要小心，因为容器可能小于600px（例如）。我建议你在这种情况下使用％。所以你不需要JS。 CSS就足够了

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

4 个答案: