CSS 强制调整图像大小并保持纵横比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12991351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS force image resize and keep aspect ratio
提问by moonvader
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, heightand widthare already specified. I added CSS rule for images:
如您所见，height并且width已经指定。我为图像添加了 CSS 规则：
img {
max-width:500px;
}
But for big_image.jpg, I receive width=500and height=600. How I can set images to be re-sized, while keeping their aspect ratios.
但是对于big_image.jpg，我收到width=500和height=600。我如何设置要重新调整大小的图像，同时保持它们的纵横比。
回答by setec
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).
如果指定区域太大，这将使图像缩小（作为缺点，它不会放大图像）。
回答by Théo T. Carranza
I've struggled with this problem quite hard, and eventually arrived at this simple solution:
我一直在努力解决这个问题，最终得出了这个简单的解决方案：
object-fit: cover;
width: 100%;
height: 250px;
You can adjust the width and height to fit your needs, and the object-fit property will do the cropping for you.
您可以调整宽度和高度以满足您的需要，并且 object-fit 属性将为您进行裁剪。
Cheers.
干杯。
回答by Aternus
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:
对于指定padding的行，需要计算图片的纵横比，例如：
640px (w) = 100%
220px (h) = ?
640/220 = 2.909
100/2.909 = 34.37%
So, top padding = 34.37%.
因此，顶部填充 = 34.37%。
回答by Hoffmann
The background-size property is ie>=9 only, but if that is fine with you, you can use a div with background-imageand set background-size: contain:
background-size 属性只有 ie>=9，但如果你觉得没问题，你可以使用 divbackground-image和 set 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. Just don't forget to set the sizes on the css since divs don't have the width/height attribute on the tag itself.
现在，您可以将 div 大小设置为您想要的任何大小，不仅图像将保持其纵横比，它还将在 div 内垂直和水平集中。只是不要忘记在 css 上设置大小，因为 div 在标签本身上没有宽度/高度属性。
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 documentationyou can simulate the background-size property in IE8 using a proprietary filter declaration:
编辑：根据MDN 背景大小文档，您可以使用专有过滤器声明模拟 IE8 中的背景大小属性：
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')";
回答by Moisés
Very similar to some answers here, but in my case I had images that sometimes were taller, sometimes larger.
与这里的一些答案非常相似，但就我而言，我的图像有时更高，有时更大。
This style worked like a charm to make sure that all images use all available space, keep the ratio and not cuts:
这种风格就像一种魅力，可以确保所有图像都使用所有可用空间，保持比例而不是剪切：
.img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
回答by el Dude
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;"/>
回答by Mark Bax
Just add this to your css, It will automaticly shrink and expand with keeping the original ratio.
只需将其添加到您的 css 中，它会在保持原始比例的情况下自动缩小和扩展。
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
回答by Marat Tanalin
There is no standard way to preserve aspect ratio for images with width, heightand max-widthspecified together.
没有标准方法可以保留带有width、height和max-width一起指定的图像的纵横比。
So we are forced either to specify widthand heightto prevent page “jumps” during loading images, or to use max-widthand 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 heightHTML-attribute by adding a rule like IMG {height: auto; }into your stylesheet.
仅指定width(without height) 通常没有多大意义，但您可以尝试height通过IMG {height: auto; }在样式表中添加类似规则来覆盖HTML 属性。
See also the related Firefox bug 392261.
另请参阅相关的 Firefox错误 392261。
回答by Aleksandar Toplek
Set the CSS class of your image container tag to image-class:
将图像容器标签的 CSS 类设置为image-class：
<div class="image-full"></div>
and add this you your CSS stylesheet.
并将其添加到您的 CSS 样式表中。
.image-full {
background: url(...some image...) no-repeat;
background-size: cover;
background-position: center center;
}
回答by Remi
To maintain a responsive image while still enforcing the image to have a certain aspect ratio you can do the following:
要在仍然强制图像具有特定纵横比的同时保持响应图像，您可以执行以下操作：
HTML:
HTML：
<div class="ratio2-1">
<img src="../image.png" alt="image">
</div>
And SCSS:
和 SCSS：
.ratio2-1 {
overflow: hidden;
position: relative;
&:before {
content: '';
display: block;
padding-top: 50%; // ratio 2:1
}
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
This can be used to enforce a certain aspect ratio, regardless of the size of the image that authors upload.
这可用于强制执行特定的纵横比，无论作者上传的图像大小如何。
Thanks to @Kseso at http://codepen.io/Kseso/pen/bfdhg. Check this URL for more ratios and a working example.
感谢http://codepen.io/Kseso/pen/bfdhg上的 @Kseso 。检查此 URL 以获取更多比率和工作示例。
