Html 在 CSS FlexBox 布局中自动调整图像大小并保持纵横比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21103622/
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
Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
提问by confile
I've used the CSS flex box layout which appears as shown below:
我使用了如下所示的 CSS 弹性框布局：
If the screen gets smaller it turns into this:
如果屏幕变小，它会变成这样：
The problem is that the images are not resized keeping the aspect ration from the original image.
问题是图像没有调整大小以保持原始图像的纵横比。
Is it possible to use pure CSS and the flex box layout to let the images be resized if the screen gets smaller?
如果屏幕变小，是否可以使用纯 CSS 和弹性框布局来调整图像大小？
Here is my html:
这是我的 html：
<div class="content">
<div class="row">
<div class="cell">
<img src="http://i.imgur.com/OUla6mK.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
</div>
</div>
my CSS:
我的 CSS：
.content {
background-color: yellow;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
background-color: red;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
margin: 10px;
background-color: green;
border: 1px solid red;
text-align: center;
}
采纳答案by Omega
img {max-width:100%;}is one way of doing this. Just add it to your CSS code.
img {max-width:100%;}是这样做的一种方式。只需将其添加到您的 CSS 代码中即可。
回答by gdbj
I came here looking for an answer to my distorted images. Not totally sure about what the op is looking for above, but I found that adding in align-items: centerwould solve it for me. Reading the docs, it makes sense to override this if you are flexing images directly, since align-items: stretchis the default. Another solution is to wrap your images with a div first.
我来到这里寻找我扭曲的图像的答案。不完全确定操作在上面寻找什么，但我发现添加align-items: center会为我解决它。阅读文档，如果您直接弯曲图像，align-items: stretch则覆盖它是有意义的，因为这是默认设置。另一种解决方案是先用 div 包装图像。
.myFlexedImage {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
回答by Lokinou
You might want to try the very new and simple CSS3 feature:
您可能想尝试非常新且简单的 CSS3 功能：
img {
object-fit: contain;
}
It preserves the picture ratio (as when you use the background-picture trick), and in my case worked nicely for the same issue.
它保留了图片比例（就像您使用背景图片技巧时一样），在我的情况下，它可以很好地解决同一问题。
Be careful though, it is not supported by IE (see support details here).
不过要小心，它不受 IE 支持（请参阅此处的支持详细信息）。
回答by user3196436
I suggest looking into background-sizeoptions to adjust the image size.
我建议查看background-size调整图像大小的选项。
Instead of having the image in the page if you have it set as a background image you can set:
如果将图像设置为背景图像，则可以设置：
background-size: contain
background-size: contain
or
或者
background-size: cover
background-size: cover
These options take into account both the height and width when scaling the image. This will work in IE9 and all other recent browsers.
这些选项在缩放图像时会考虑高度和宽度。这将适用于 IE9 和所有其他最近的浏览器。
回答by sergio
In the second image it looks like you want the image to fill the box, but the example you created DOES keep the aspect ratio (the pets look normal, not slim or fat).
在第二个图像中，您似乎希望图像填充框，但您创建的示例确实保持了纵横比（宠物看起来正常，而不是苗条或肥胖）。
I have no clue if you photoshopped those images as example or the second one is "how it should be" as well (you said IS, while the first example you said "should")
我不知道您是将这些图像作为示例进行了 Photoshop 处理，还是第二个也是“它应该如何”（您说的是 IS，而第一个示例您说的是“应该”）
Anyway, I have to assume:
无论如何，我必须假设：
If "the images are not resized keeping the aspect ration" and you show me an image which DOES keep the aspect ratio of the pixels, I have to assume you are trying to accomplish the aspect ratio of the "cropping" area (the inner of the green) WILE keeping the aspect ratio of the pixels. I.e. you want to fill the cell with the image, by enlarging and cropping the image.
如果“图像没有调整大小保持纵横比”，并且您向我展示了一个保持像素纵横比的图像，我必须假设您正在尝试完成“裁剪”区域的纵横比（内部绿色）WILE 保持像素的纵横比。即你想用图像填充单元格，通过放大和裁剪图像。
If that's your problem, the code you provided does NOT reflect "your problem", but your starting example.
如果这是您的问题，则您提供的代码不会反映“您的问题”，而是您的起始示例。
Given the previous two assumptions, what you need can't be accomplished with actual images if the height of the box is dynamic, but with background images. Either by using "background-size: contain" or these techniques (smart paddings in percents that limit the cropping or max sizes anywhere you want): http://fofwebdesign.co.uk/template/_testing/scale-img/scale-img.htm
考虑到前两个假设，如果框的高度是动态的，但使用背景图像，则无法使用实际图像来完成您所需要的。通过使用“背景尺寸：包含”或这些技术（以百分比为单位的智能填充，可以限制您想要的任何地方的裁剪或最大尺寸）：http: //fofwebdesign.co.uk/template/_testing/scale-img/scale-图片.htm
The only way this is possible with images is if we FORGET about your second iimage, and the cells have a fixed height, and FORTUNATELY, judging by your sample images, the height stays the same!
图像可能的唯一方法是，如果我们忘记了您的第二个 iimage，并且单元格具有固定的高度，并且幸运的是，根据您的示例图像判断，高度保持不变！
So if your container's height doesn't change, and you want to keep your images square, you just have to set the max-height of the images to that known value (minus paddings or borders, depending on the box-sizing property of the cells)
因此，如果您的容器的高度没有改变，并且您想保持图像方形，则只需将图像的最大高度设置为该已知值（减去填充或边框，具体取决于框的大小属性）细胞）
Like this:
像这样：
<div class="content">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/output/people-q-c-320-320-2.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/people-q-c-320-320-7.jpg"/>
</div>
</div>
</div>
And the CSS:
和 CSS：
.content {
background-color: green;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
border: solid 10px red;
text-align: center;
height: 300px;
display: flex;
align-items: center;
box-sizing: content-box;
}
img {
margin: auto;
width: 100%;
max-width: 300px;
max-height:100%
}
Your code is invalid (opening tags are instead of closing ones, so they output NESTED cells, not siblings, he used a SCREENSHOT of your images inside the faulty code, and the flex box is not holding the cells but both examples in a column (you setup "row" but the corrupt code nesting one cell inside the other resulted in a flex inside a flex, finally working as COLUMNS. I have no idea what you wanted to accomplish, and how you came up with that code, but I'm guessing what you want is this.
您的代码无效（打开标签而不是关闭标签，因此它们输出 NESTED 单元格，而不是兄弟单元格，他在错误代码中使用了您的图像的 SCREENSHOT，并且弹性框没有保存单元格，而是将两个示例放在一列中（您设置了“行”，但是将一个单元格嵌套在另一个单元格中的损坏代码导致了一个 flex 单元格内的一个 flex 单元格，最终作为 COLUMNS 工作。我不知道你想要完成什么，以及你是如何想出那个代码的，但我不知道我猜你想要的是这个。
I added display: flex to the cells too, so the image gets centered (I think display: tablecould have been used here as well with all this markup)
我也向单元格添加了 display: flex，因此图像居中（我认为display: table这里也可以使用所有这些标记）
回答by Ukr
HTML:
HTML：
<div class="container">
<div class="box">
<img src="http://lorempixel.com/1600/1200/" alt="">
</div>
</div>
CSS:
CSS：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: hsl(0, 0%, 96%);
}
.box {
border-radius: 4px;
display: flex;
}
.box img {
width: 100%;
object-fit: contain;
border-radius: 4px;
}
回答by ggzone
That's how I would handle different images (sizes and proportions) in a flexible grid.
这就是我在灵活网格中处理不同图像（大小和比例）的方式。
.images {
display: flex;
flex-wrap: wrap;
margin: -20px;
}
.imagewrapper {
display: flex;
justify-content: center;
align-items: center;
width: calc(50% - 20px);
height: 300px;
margin: 10px;
}
.image {
display: block;
object-fit: cover;
width: 100%;
height: 100%; /* set to 'auto' in IE11 to avoid distortions */
}<div class="images">
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/800x600" />
</div>
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/1024x768" />
</div>
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/1000x800" />
</div>
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/500x800" />
</div>
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/800x600" />
</div>
<div class="imagewrapper">
<img class="image" src="https://via.placeholder.com/1024x768" />
</div>
</div>回答by Erick Boileau
I am using jquery or vw to keep the ratio
我正在使用 jquery 或 vw 来保持比例
jquery
查询
function setSize() {
var $h = $('.cell').width();
$('.your-img-class').height($h);
}
$(setSize);
$( window ).resize(setSize);
vw
大众
.cell{
width:30vw;
height:30vw;
}
.cell img{
width:100%;
height:100%;
}
