Question

我使用了CSS弹性框布局，如下所示：

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;

}

Answer 1

我来到这里寻找我扭曲的图像的答案。不完全确定操作上面的操作是什么，但我发现添加align-items: center可以解决它。阅读文档，如果直接弯曲图像，则覆盖它是有意义的，因为align-items: stretch是默认值。另一个解决方案是先用div包装你的图像。

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

Answer 2

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

http://jsfiddle.net/89dtxt6s/

Answer 3

您可能想尝试一种全新的简单CSS3功能：

img { 
  object-fit: contain;
}

它保留了图片比例（就像你使用背景图片技巧一样），在我的情况下也能很好地解决同样的问题。

但请注意，IE不支持它（请参阅支持详情here）。

Answer 4

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

如果您将图像设置为背景图像，则可以设置：

，而不是在页面中显示图像

background-size: contain

或

background-size: cover

这些选项在缩放图像时会考虑高度和宽度。这将适用于IE9和所有其他最近的浏览器。

Answer 5

在第二张图片中，您似乎希望图像填充框，但您创建的示例保持纵横比（宠物看起来正常，不苗条或肥胖）。

我不知道你是否将这些图片作为示例进行了拍照，或者第二个是＆＃34;它应该如何＆＃34; （你说的是IS，而你说的第一个例子是＃34;应该＆＃34;）

无论如何，我必须假设：

如果＆＃34;图像没有调整大小，保持宽高比＆＃34;并且你向我展示了一个保持像素宽高比的图像，我不得不假设你正在尝试完成＆＃34;裁剪＆＃34;的纵横比。区域（绿色的内部）WILE保持像素的宽高比。即你想通过放大和裁剪图像来用图像填充单元格。

如果这是您的问题，您提供的代码并不反映您的问题＆＃34;，而是您的首发示例。

鉴于前两个假设，如果盒子的高度是动态的，那么你需要的东西不能用实际的图像完成，而是用背景图像。通过使用＆＃34; background-size：contains＆＃34;或者这些技术（百分比中的智能填充限制了你想要的任何地方的裁剪或最大尺寸）： 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单元格，而不是兄弟姐妹，他在错误的代码中使用了SCREENSHOT的图像，并且flex框没有保持单元格，但两个示例都在一列（你设置＆＃34; row＆＃34;但是将一个单元格嵌套在另一个单元格中的损坏代码导致flex内部的flex，最后作为COLUMNS工作。我不知道你想要完成什么，以及你是如何想出那些代码的，但我猜你想要的是这个。

我添加了display：flex to the cells，所以图像居中（我认为display: table也可以在这里使用所有这些标记）

Answer 6

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

Answer 7

这就是我在灵活的网格中处理不同图像（大小和比例）的方式。

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

Answer 8

为您的单元格 div 设置 50% 的宽度或特定数字。对于 img 标签，将宽度设置为 100%。这样，宽度必须始终为 100%，高度将相应地改变，保持纵横比不变。

Answer 9

我使用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%;
}

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

9 个答案:

HTML：

CSS：