使用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。