在CSS FlexBox布局中自动调整图像大小并保持纵横比？
我使用了如下所示的CSS弹性框布局：
如果屏幕变小，则变成：
问题在于图像不能保持原始图像的纵横比。
如果屏幕变小，是否可以使用纯CSS和popup框布局来调整图像大小？
这是我的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; }
img {max-width:100%;}是这样做的一种方法。 只需将其添加到您的CSS代码。
我来到这里寻找我的扭曲图像的答案。 不完全确定上面的操作，但是我发现在align-items: center会为我解决这个问题。 阅读文档，如果您直接弯曲图像，覆盖此是有意义的，因为align-items: stretch是默认值。 另一个解决scheme是首先用div来包装图像。
.myFlexedImage { display: flex; flex-flow: row nowrap; align-items: center; }
您可能想要尝试一下这个非常新颖且简单的CSS4function：
img { object-fit: contain; }
它保留了图片比例（就像当你使用背景图片技巧），在我的情况下，很好地为同样的问题工作。
我build议看看background-size选项来调整图像大小。
如果您将图像设置为背景图像，您可以设置：
background-size: contain
要么
background-size: cover
这些选项在缩放图像时会考虑高度和宽度。 这将在IE9和所有其他最近的浏览器。
在第二个图像，它看起来像你想要的图像填充框，但你创build的例子保持纵横比（宠物看起来正常，不苗条或肥胖）。
我不知道如果你把这些图片作为例子拍摄，或者第二个是“它应该如何”（你说的是，而你说的第一个例子“应该”）
无论如何，我必须假设：
如果“保持宽高比不调整图像尺寸”，并向我展示保持像素纵横比的图像，则必须假设您正在尝试实现“裁剪”区域（内部）的宽高比绿色）WILE保持像素的高宽比。 也就是说，你想用图像填充单元格，放大和裁剪图像。
如果这是你的问题，你提供的代码并不反映“你的问题”，而是你的开始的例子。
给定前两个假设，如果箱子的高度是dynamic的，但是具有背景图像，则实际图像无法实现您所需要的。 无论是通过使用“背景大小：包含”或这些技术（智能填充百分比，限制裁剪或最大大小任何地方你想要的）： 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-qc-320-320-2.jpg"/> </div> <div class="cell"> <img src="http://lorempixel.com/output/people-qc-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% }
你的代码是无效的（开放标签是代替closures的，所以他们输出NESTED细胞，而不是兄弟姐妹，他在错误的代码中使用了图像的SCREENSHOT，并且popup框不包含单元格，而是列中的两个例子你设置了“row”，但是破坏的代码嵌套在另一个单元格的内部，导致了flex内部的flex，最后是COLUMNS。我不知道你想完成什么，以及你是如何得到这个代码的，猜猜你想要的是这个。
我也添加了显示器：flex，所以图像得到了中心（我认为display: table也可以用在这里，以及所有这些标记）
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; }
我使用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%; }
