CSS3 Flexbox保持图像宽高比

使用CSS弹性盒模型,如何强制图像保持其纵横比?

JS小提琴http://jsfiddle.net/xLc2Le0k/2/

请注意,为了填充容器的宽度,图像会伸缩。 这很好,但是我们也可以让它伸展或缩小高度来保持图像比例吗?

HTML

<div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> </div> 

CSS

 .slider { display: flex; } .slider img { margin: 0 5px; } 

对于img标签,如果你定义一边,那么另一边的大小将保持高宽比,默认情况下图像展开为原始大小。

使用这个事实,如果你将每个img标签包装到div标签中,并将其宽度设置为父div的100%,那么高度将根据你想要的高宽比进行设置。

http://jsfiddle.net/xLc2Le0k/15/

 * { margin: 0; padding: 0; } .slider { display: flex; } .slider .slide img { width: 100%; } 

大多数图像具有固有的尺寸 ,这是一个自然的大小,像一个jpeg图像。 如果指定的大小定义了宽度和高度中的一个,则使用固有比率…确定缺失值 – 参见MDN 。

但是,就我所知,如果被设置为当前灵活框布局模块级别1的直接弹性项目的图像,那么这并不如预期的那样工作。

看到这些讨论和错误报告可能是相关的:

  • Flexbugs#14 – Chrome / Flexbox固有尺寸未正确实施。
  • Firefox Bug 972595 – Flex容器应该使用“flex-basis”而不是“width”来计算flex项目的内在宽度
  • Chromium问题249112 – 在Flexbox中,允许固有纵横比通知主尺寸计算。

作为一个解决方法,你可以用<div>或者<span>来包装每个<img>

的jsfiddle

 .slider { display: flex; } .slider > div { min-width: 0; /*don't forget this line, see the explanation below*/ } .slider > div > img { max-width: 100%; /*or width: 100%; if so the above line won't be required */ height: auto; } 
 <div class="slider"> <div><img src="http://www.placebacon.net/400/300"/></div> <div><img src="http://www.placebacon.net/400/300"/></div> <div><img src="http://www.placebacon.net/400/300"/></div> <div><img src="http://www.placebacon.net/400/300"/></div> </div> 

为了保持图像不会伸展在Flex父级的任何一个轴上,我已经find了一些解决scheme。

你可以尝试在图像上使用物体贴合,例如

 object-fit: contain; 

http://jsfiddle.net/ykw3sfjd/

或者你可以添加灵活规则,在某些情况下可能会更好。

 align-self: center; flex: 0 0 auto; 

不需要添加一个包含div。

css“align-items”属性的默认值是“stretch”,这是导致图像被拉伸到原始高度的原因。 将css“align-items”属性设置为“flex-start”可以解决您的问题。

 .slider { display: flex; align-items: flex-start; /* ADD THIS! */ } 

最近我一直在玩flexbox,我通过实验和以下的推理来解决这个问题。 但是,实际上我不确定这是否会发生。

如果实际宽度受到柔性系统的影响。 所以在元素的宽度达到父宽度的最大宽度之后,他们在CSS中设置的额外宽度被忽略。 然后将宽度设置为100%是安全的。

由于img标签的高度是从图像本身派生的,所以将高度设置为0%可以做些事情。 (这是我不清楚什么…但它是有道理的,它应该修复它)

DEMO

(记得先在这里看到!)

 .slider { display: flex; } .slider img { height: 0%; width: 100%; margin: 0 5px; } 

只在铬中工作

其实我发现图像标签的容器需要有一个高度,以保持图像的比例。 例如>

 .container{display:flex; height:100%;} img{width:100%;height:auto;} 

然后在你的HTML你的容器将包装标签图像

 <div class="container"><img src="image.jpg" alt="image" /></div> 

这个工作适用于IE和其他浏览器

我只是有同样的问题。 使用flex align将元素居中。 您需要使用align-items: center而不是align-content: center 。 这将保持宽高比,而align-content不会保持宽高比。