CSS强制图像调整大小并保持纵横比

本文翻译自：CSS force image resize and keep aspect ratio

I am working with images, and I ran across a problem with aspect ratios. 我正在使用图像，我遇到了纵横比问题。

<img src="big_image.jpg" width="900" height="600" alt="" />

As you can see, height and width are already specified. 如您所见，已指定height和width 。 I added CSS rule for images: 我为图片添加了CSS规则：

img {
  max-width:500px;
}

But for big_image.jpg , I receive width=500 and height=600 . 但是对于big_image.jpg ，我收到width=500和height=600 。 How I can set images to be re-sized, while keeping their aspect ratios. 我如何设置图像以重新调整大小，同时保持其纵横比。

---

#1楼

参考：https://stackoom.com/question/sVdv/CSS强制图像调整大小并保持纵横比

---

#2楼

Remove the "height" property. 删除“高度”属性。

<img src="big_image.jpg" width="900" alt=""/>

By specifying both you are changing the aspect ratio of the image. 通过指定两者，您正在更改图像的纵横比。 Just setting one will resize but preserve the aspect ratio. 只需设置一个将调整大小但保留纵横比。

Optionally, to restrict oversizings: （可选）限制夸大：

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

---

#3楼

There is no standard way to preserve aspect ratio for images with width , height and max-width specified together. 没有标准方法来保持width ， height和max-width一起指定的图像的宽高比。

So we are forced either to specify width and height to prevent page “jumps” during loading images, or to use max-width and not specify dimensions for images. 所以我们被迫指定width和height以防止在加载图像期间页面“跳跃”，或者使用max-width而不指定图像的尺寸。

Specifying just width (without height ) typically makes not much sense, but you can try to override the height HTML-attribute by adding a rule like IMG {height: auto; } 指定只是width （没有height ）通常没有多大意义，但您可以尝试通过添加IMG {height: auto; }等规则来覆盖height HTML属性IMG {height: auto; } IMG {height: auto; } into your stylesheet. IMG {height: auto; }到你的样式表。

See also the related Firefox bug 392261 . 另请参阅相关的Firefox bug 392261 。

---

#4楼

The background-size property is ie>=9 only, but if that is fine with you, you can use a div with background-image and set background-size: contain : background-size属性仅为> = 9，但如果你没问题，可以使用带background-image的div并设置background-size: contain ：

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally within the div. 现在您可以将div大小设置为您想要的任何值，不仅图像保持其宽高比，它还将在div中垂直和水平集中。 Just don't forget to set the sizes on the css since divs don't have the width/height attribute on the tag itself. 只是不要忘记在css上设置大小，因为div在标签本身上没有width / height属性。

This approach is different than setecs answer, using this the image area will be constant and defined by you (leaving empty spaces either horizontally or vertically depending on the div size and image aspect ratio), while setecs answer will get you a box that exactly the size of the scaled image (without empty spaces). 这种方法与setecs的答案不同，使用此方法，图像区域将是恒定的并由您定义（根据div大小和图像宽高比在水平或垂直方向留下空白区域），而setecs答案将为您提供一个完全相同的方框缩放图像的大小（没有空格）。

Edit: According to the MDN background-size documentation you can simulate the background-size property in IE8 using a proprietary filter declaration: 编辑：根据MDN背景大小文档，您可以使用专有过滤器声明模拟IE8中的background-size属性：

Though Internet Explorer 8 doesn't support the background-size property, it is possible to emulate some of its functionality using the non-standard -ms-filter function: 虽然Internet Explorer 8不支持background-size属性，但可以使用非标准-ms-filter函数模拟其某些功能：

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

---

#5楼

 img { display: block; max-width:230px; max-height:95px; width: auto; height: auto; } 

 <p>This image is originally 400x400 pixels, but should get resized by the CSS:</p> <img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png"> 

This will make image shrink if it's too big for specified area (as downside, it will not enlarge image). 如果图像对于指定区域来说太大（这将使图像缩小，则会使图像缩小）。

---

#6楼

The solutions below will allow scaling up and scaling down of the image , depending on the parent box width. 下面的解决方案将允许放大和缩小图像 ，具体取决于父框宽度。

All images have a parent container with a fixed width for demonstration purposes only . 所有图像都有一个具有固定宽度的父容器， 仅用于演示目的 。 In production, this will be the width of the parent box. 在生产中，这将是父框的宽度。

Best Practice (2018): 最佳实践（2018年）：

This solution tells the browser to render the image with max available width and adjust the height as a percentage of that width. 此解决方案告诉浏览器渲染具有最大可用宽度的图像，并将高度调整为该宽度的百分比。

 .parent { width: 100px; } img { display: block; width: 100%; height: auto; } 

 <p>This image is originally 400x400 pixels, but should get resized by the CSS:</p> <div class="parent"> <img width="400" height="400" src="https://placehold.it/400x400"> </div> 

Fancier Solution: 发烧友解决方案：

With the fancier solution, you'll be able to crop the image regardless of its size and add a background color to compensate for the cropping. 使用更高级的解决方案，您将能够裁剪图像，无论其大小如何，并添加背景颜色以补偿裁剪。

 .parent { width: 100px; } .container { display: block; width: 100%; height: auto; position: relative; overflow: hidden; padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */ } .container img { display: block; max-width: 100%; max-height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 

 <p>This image is originally 640x220, but should get resized by the CSS:</p> <div class="parent"> <div class="container"> <img width="640" height="220" src="https://placehold.it/640x220"> </div> </div> 

For the line specifying padding, you need to calculate the aspect ratio of the image, for example: 对于指定填充的行，您需要计算图像的纵横比，例如：

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

So, top padding = 34.37%. 因此，顶部填充= 34.37％。