在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; } 

7 Solutions collect form web for “在CSS FlexBox布局中自动调整图像大小并保持纵横比?”

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

http://jsfiddle.net/89dtxt6s/

我来到这里寻找我的扭曲图像的答案。 不完全确定上面的操作,但是我发现在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% } 

http://jsfiddle.net/z25heocL/

你的代码是无效的(开放标签是代替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%; } 
  • 缩放图像以适合边界框
  • HTML5号码input - 始终显示2位小数
  • 在Angular 2中的路线之间导航时显示加载屏幕
  • 从JavaScript调用php函数
  • 删除Microsoft Edge的电话号码样式
  • 为什么要使用<label>?
  • jQuery:获取jQuery隐藏元素的高度
  • 如何更改棒棒糖最新Android Chrome版本中的标题栏和地址栏的颜色?
  • 大dynamic大小的html表格,具有固定的滚动行和固定滚动列
  • 如何在HTML属性值中转义引号?
  • 如何获取和设置当前的网页滚动位置?