问CSS: 100%宽或高，同时保持纵横比？

EN

如果只在图像上定义一个维度，则图像的纵横比将始终保留。

图片比你喜欢的大/高的问题吗？

您可以将其放入设置为图像的最大高度/宽度的DIV中，然后设置overflow:hidden。它会裁剪出你想要的任何东西。

如果图像是100%宽和高:auto，你会认为它太高了，这是因为宽高比被保留了。您需要裁剪，或更改纵横比。

请提供更多关于您正在努力实现的目标的信息，我将尝试提供更多帮助！

-根据反馈进行编辑

您熟悉max-width和max-height属性吗？您可以随时设置它们。如果你没有设置任何最小值，而设置了最大高度和最大宽度，那么你的图像将不会失真(纵横比将被保留)，并且它不会大于任何最长和达到最大尺寸的尺寸。

几年后，为了满足同样的需求，我发现了一个使用background-size的CSS选项。

它应该可以在现代浏览器(IE9+)中工作。

<div id="container" style="background-image:url(myimage.png)">
</div>

和风格：

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

参考资料：http://www.w3schools.com/cssref/css3_pr_background-size.asp

演示：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

通过将CSS max-width属性设置为100%，图像将填充其父元素的宽度，但不会呈现大于其实际大小的宽度，从而保持分辨率。

将height属性设置为auto将保持图像的纵横比，使用此技术将允许覆盖静态高度，并允许图像在所有方向上按比例弯曲。

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