CSS：图片已“修复”高度，最大宽度并保持宽高比？ [英] CSS: Image to have "Fixed" height, max-width, and maintain aspect ratio?

问题描述

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

I have a set of pictures, each with different heights and widths that I want to put into a div tag. I want the picture to try to have a fixed height, unless the width exceeds a fixed amount, whereby I want the height to shrink to maintain the aspect ratio. I tried:

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

这可以固定高度，但是如果图像的宽度超过720px，它将挤压水平图片且不保持宽高比。有什么建议吗？

This fixes the height but if the image goes beyond 720px width, it squishes the picture horizontally and does not maintain the aspect ratio. Suggestions?

编辑：也许可以用一种更好的方法将图片扩展到其中一种尺寸并保持宽高比。

Maybe a better way of putting this is I'd like the picture to expand to one of those sizes and maintain the aspect ratio.

推荐答案

这是否满足您的需求？

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

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

编辑：使答案更简单。

这篇关于CSS：图片已“修复”高度，最大宽度并保持宽高比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！