【问题标题】：CSS: Image to have "Fixed" height, max-width, and maintain aspect ratio?CSS：图像具有“固定”高度、最大宽度并保持纵横比？
【发布时间】：2014-02-06 05:15:21
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

这是否满足您的需求？

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

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

编辑：让答案更简单。

【讨论】：

有趣的图片选择。

【解决方案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;
}

【讨论】：

【解决方案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。

【讨论】：

【解决方案4】：

如果高度是固定的，它不会保持纵横比，将它们都设置为你想要的最大值，它会保持比例。

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

编辑：

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

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

如果它有这样的宽度和高度，你将无法用 css 修复。

【讨论】：

我希望图片扩展到这两个值之一并保持比率。如果图片小于其中任何一个，则不会这样做。
检查编辑，确保您的图像标签没有高度和宽度属性。
我确定我不是。但是，假设图片是 100 像素 x 200 像素，我希望图像拉伸到最大宽度或最大高度。但也不能超过。这样，图像不会扩展，它保持 100 像素 x 200 像素。
您不想将图像拉伸得比实际更大。这就是它应该的样子。将图像放大，以便可以如您所愿缩小尺寸。这对于 Retina 设备或更高分辨率的屏幕也会更好。在保持纵横比的同时..

【解决方案5】：

将元素包裹在一个固定宽度/高度的 div 中：

<div style="width: 720px; height: 660px;">
  <img src="whatever" />
</div>

【讨论】：

使用background-size:cover;

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

CSS

View here and re-size the window to see.

使用`background-size:cover;`