css - 使用 css 缩小图像以适应容器

Question

所以我想用 css 将图像缩小到容器的大小，同时保持其纵横比。指定最小高度或宽度时似乎很容易实现这一点，但不能同时指定两者。有什么想法吗？

Answer 1

判断是高度少了还是宽度少了；以较小的维度为准，设置 img 的那个属性，而不是另一个。假设您没有在 CSS 中设置 img 的大小，这应该保持纵横比，同时使图像在容器的约束内尽可能大。此代码假定您的容器是 div。

var height = $('#divImg').Height();
var width = $('#divImg').Width();

if (height > width)
{
    $('#divImg img').Width(width);
}
else
{
    $('#divImg img').Height(height);
}

编辑:

如果您不使用 jQuery，则可以使用以下 CSS 技巧来保持纵横比。将 100px 更改为容器的大小:

#divImg img {
    height: 100px;
    width: auto;
}  
#divImg img {
    height: auto;
    width: 100px;
}

借自CSS styling image height and width while maintaining aspect ratio .