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

问题描述

我使用了如下所示的 CSS 弹性框布局:

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

问题是图像没有调整大小以保持原始图像的纵横比.

如果屏幕变小，是否可以使用纯 CSS 和弹性框布局来调整图像大小?

这是我的 html:

<div class="row"><div class="cell"><img src="http://i.imgur.com/OUla6mK.jpg"/>
<div class="cell"><img src="http://i.imgur.com/M16WzMd.jpg"/>

我的 CSS:

.content {背景颜色:黄色；}.排 {显示:-webkit-box；显示:-moz-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；-webkit-box-orient:水平；-moz-box-orient:水平；box-orient:水平；弹性方向:行；-webkit-box-pack: 中心；-moz-box-pack:中心；盒装:中心；对齐内容:居中；-webkit-box-align:居中；-moz-box-align:居中；框对齐:居中；对齐项目:居中；背景颜色:红色；}.细胞 {-webkit-box-flex: 1;-moz-box-flex: 1;盒弹性:1;-webkit-flex:1 1 自动；弹性:1 1 自动；填充:10px；边距:10px；背景颜色:绿色；边框:1px纯红色；文本对齐:居中；}

解决方案

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