在CSS FlexBox布局和保持纵横比自动调整图像？ [英] Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?

问题描述

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

如果屏幕变小，则变为：

是图像不被调整大小保持与原始图像的长宽比。

是否可以使用纯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; 
显示：-ms-flexbox; 
 display：-webkit-flex; 
 display： 
 
 -webkit-box-orient：horizo​​ntal; 
 -moz-box-orient：horizo​​ntal; 
 box-orient：horizo​​ntal; 
 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代码。

http://jsfiddle.net/89dtxt6s/

I've used the CSS flex box layout which appears as shown below:

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?

Here is my 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:

.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%;} is one way of doing this. Just add it to your CSS code.

http://jsfiddle.net/89dtxt6s/

这篇关于在CSS FlexBox布局和保持纵横比自动调整图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！