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

Question

我有一组图片，每个图片的高度和宽度都不同，我想把它们放到一个 div 标签里面。我希望每张图片都尽可能地保持一个固定的高度，除非宽度超过了一个固定的值，这时我希望图片的高度适当缩小以保持其长宽比例。我尝试了以下代码：

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

这个方法可以固定图片的高度，但如果图片超过720像素宽度，它会横向压缩图片，而不保持纵横比。有什么建议吗？

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

- Toadfish

Answer 1

这是否符合您的需求？

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

请查看http://jsfiddle.net/7s9wnjse/1/.

编辑：使答案更简单。

- joshhunt

---

有趣的图像选择。 - avyfain

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;
}

- Nicholas Hazel

Answer 3

这将会给你想要的结果：

CSS

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

Answer 4

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

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

编辑：

请检查您的图像标签，它们可能已经设置了宽度和高度。如果是这种情况，您需要将其删除。

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

如果它已经有了宽度和高度，你将无法使用css进行修复。

- codeaddict

---

我希望图片能够扩展到这两个值之一并保持比例。如果图片小于这两个值中的任何一个，它就不会这样做。 - Toadfish

检查编辑，确保您的图像标签没有高度和宽度属性。 - codeaddict

我确保我没有。然而，假设图片的大小为100像素乘以200像素，我希望图像能够拉伸到最大宽度或最大高度，但不要超过任何一个限制。通过这种方式，图像不会扩展，它仍然是100像素乘以200像素。 - Toadfish

您不希望将图像拉伸得比它们本来的尺寸更大。这就是应该的方式。将图像放大，以便可以像您希望的那样调整大小。这对于视网膜设备或高分辨率屏幕也更好。同时保持纵横比... - codeaddict

Answer 5

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

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

- jstaab