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

Question

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

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

这可以修复高度，但是如果图像超出720px宽度，它会水平搜索图像并且不保持纵横比。建议？

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

Answer 1

这是否符合您的需求？

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

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

编辑：回答更简单。

Answer 2

使用background-size:cover;

小提琴：http://jsfiddle.net/SinisterSystems/cukgh/3/

.box {
    float:left;
    margin:15px;
    width:100px;
    height:100px;
    background:url("http://www.hdwallpapers3g.com/wp-content/uploads/2014/01/Images-6.jpg");
    background-size:cover;
}

Answer 3

这会给你你想要的东西：

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 */
}

View here and re-size the window to see.

基本上，只需获取 Normalize.css 的副本。

Answer 4

如果高度固定，它将不会保持纵横比，将它们设置为您想要的最大值，并保持比率。

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

编辑：

看看你的图片标签，他们可能已经设置了它们的宽度和高度。如果是这种情况，你需要删除它们。

<img src="image/path" width="250px" height="3005px" alt="valid image"/>

如果它上面有宽度和高度，你将无法用css修复。