在 CSS FlexBox 布局中自动调整图像大小并保持高宽比? ？

我使用了 CSS Flex box 布局，如下所示:

enter image description here

如果屏幕变小，就会变成这样:

enter image description here

问题是图像的大小不能保持原始图像的纵横比。

是否有可能使用纯 CSS 和弹性框布局，让图像的大小调整，如果屏幕变小？

这是我的 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>

我的 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;


}
348598 次浏览
小开
最佳答案

img {max-width:100%;}是这样做的一种方法。只需将它添加到您的 CSS 代码中。

Http://jsfiddle.net/89dtxt6s/

小开

我建议查看 background-size选项来调整图像大小。

如果你把图片设置为背景图片，你可以把它设置为:

background-size: contain

或者

background-size: cover

这些选项在缩放图像时同时考虑了高度和宽度。这将工作在 IE9和所有其他最近的浏览器。

小开

我使用 jquery 或 vw 来保持这个比率

Jquery

function setSize() {
var $h = $('.cell').width();
$('.your-img-class').height($h);
}
$(setSize);
$( window ).resize(setSize);

大众

 .cell{
width:30vw;
height:30vw;
}
.cell img{
width:100%;
height:100%;
}
小开

在第二张图片中，看起来你想让图片填满方框，但是你创建的例子保持了纵横比(宠物看起来正常，不苗条或肥胖)。

我不知道你是把这些图像 PS 成了例子，还是第二个例子也是“它应该是怎样的”(你说的是 IS，而第一个例子你说的是“应该”)

不管怎样，我必须假设:

如果“图像没有调整大小以保持宽高比”，而你给我看的图像确实保持了像素的宽高比，我不得不假设你正在试图完成“裁剪”区域(绿色内部)的宽高比，WILE 保持了像素的宽高比。也就是说，你想通过放大和裁剪图像来填充单元格中的图像。

如果这是你的问题，你提供的代码不反映“你的问题”，但你的开始示例。

考虑到前面两个假设，如果盒子的高度是动态的，但是使用背景图像，那么你所需要的不能用实际的图像来完成。通过使用背景大小: 包含或这些技术(智能填充的百分比限制裁剪或最大大小的任何地方你想) : Http://fofwebdesign.co.uk/template/_testing/scale-img/scale-img.htm

对于图像来说，唯一可能做到这一点的方法是，我们忘记第二张图像，单元格有一个固定的高度，幸运的是，根据样本图像判断，高度保持不变！

因此，如果容器的高度没有变化，并且希望图像保持正方形，那么只需将图像的最大高度设置为已知值(减去填充或边框，这取决于单元格的盒子大小属性)

像这样:

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

还有 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%
}

Http://jsfiddle.net/z25heocl/

你的代码是无效的(开始标签代替关闭标签，所以他们输出 NESTED 单元格，而不是兄弟，他使用了一个屏幕快照你的图像在错误的代码，和 Flex 框是不容纳单元格，但在一个列中的两个例子(你设置“行”，但损坏的代码嵌套在一个单元格内的另一个导致一个 Flex 内的一个 Flex，最终作为 COLUMNS 工作。 我不知道你想要完成什么，也不知道你是怎么想出那个代码的，但我猜你想要的是这个。

我还在单元格中添加了 display: flex，这样图像就会居中显示(我认为 display: table也可以在这里与所有这些标记一起使用)

小开

我来这里寻找我扭曲影像的答案。不完全确定什么操作正在寻找以上，但我发现，增加 align-items: center将为我解决它。在阅读文档时，如果直接对图像进行弯曲，那么覆盖这个选项是有意义的，因为 align-items: stretch是默认选项。另一种解决方案是首先用 div 包装图像。

.myFlexedImage {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
小开

你可能想尝试一下新的简单的 CSS3功能:

img {
object-fit: contain;
}

它保留了图片比率(就像使用背景图片技巧一样) ，在我的例子中，它在同样的问题上表现得很好。

但是要小心，IE 不支持它(请参阅支持细节 给你)。

如果希望指定特定的长宽比，可以将其与 aspect-ratio属性组合在一起

img {
object-fit: contain;
aspect-ratio:2/1;
}
小开

HTML:

<div class="container">
<div class="box">
<img src="http://lorempixel.com/1600/1200/" alt="">
</div>
</div>

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

这就是我如何在一个灵活的网格中处理不同的图像(大小和比例)。

.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>

小开

为单元格 div 设置50% 的宽度或特定的数字。 对于 img 标记，将宽度设置为100% 。 这样，宽度将必须是100% 所有的时间和高度将相应地改变保持高宽比相同。

小开

你可以很容易做到这一点与网格:

display: grid;
grid-template-columns: auto auto;
justify-content: space-between;

提交答案