CSS：图像具有“固定”高度、最大宽度并保持纵横比？

Question

我有一组图片，每张图片的高度和宽度都不同，我想将它们放入 div 标签中。我希望图片尝试具有固定高度，除非宽度超过固定量，因此我希望缩小高度以保持纵横比。我试过：

 .ArtistPic
{
    height: 660px;
    max-width: 720px;
}

这固定了高度，但如果图像宽度超过 720px，它会水平挤压图片并且不保持纵横比。建议？

编辑：也许更好的表达方式是我希望图片扩展到其中一种尺寸并保持纵横比。

原文由 Toadfish 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是否满足您的需求？

 .ArtistPic {
    max-width: 720px;
    max-height: 660px;
}

请参阅 http://jsfiddle.net/7s9wnjse/1/ 。

编辑：使答案更简单。

原文由 joshhunt 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这会给你你想要的：

CSS

 img {
    width: auto;  /* set to anything and aspect ratio is maintained - also corrects glitch in Internet Explorer */
    height: auto;  /* set to anything and aspect ratio is maintained */
    max-width: 100%;
    border: 0;  /* for older IE browsers that draw borders around images */
}

在此处查看并重新调整窗口大小以查看。

基本上，只需为自己获取一份 Normalize.css 的副本。

原文由 Deryck 发布，翻译遵循 CC BY-SA 3.0 许可协议