用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借来的。