CSS Flexbox图像不保留宽高比 [英] CSS Flexbox images not preserving aspect ratio

问题描述

我试图学习使用Flexbox。我有一个页面，中间有一个由两个图像隔开的图像，从上到下堆叠。我希望酒吧保持相同的大小，无论浏览器和两个图像调整大小，当浏览器缩小（保持原来的图像大小，如果有额外的空间，我通过包含div上的最大高度强制执行）。我可以通过调整高度来调整图像大小，但宽度不会改变以保持宽高比。

我已经阅读了几个类似的问题和教程，但是我似乎无法应用他们的解决方案来适应我的情况。这个解决方案似乎是最接近我的需求： http://goo.gl/iE6Wbh

这是我到目前为止。我不知道为什么它会导致内容在codepen上滚动... http://codepen.io / anon / pen / VLvxgo

 < style> 
 #container 
 {
 width：100％; 
身高：100％; 
 display：flex; 
 flex-direction：column; 
 flex-wrap：nowrap; 
 justify-content：center; 
 align-items：center; 
} 
 
 .topbottom 
 {
 flex：3; 
 display：flex; 
} 
 
 .topbottom.top 
 {
最大高度：93px; 
} 
 
 .topbottom.bottom 
 {
 max-height：152px; 
} 
 
 .topbottom> img 
 {
 width：auto; 
身高：100％; 
} 
 
 #dividerbar 
 {
 background-color：blue; 
宽度：100％; 
 height：50px; 
 margin：20px 0; 
} 
< / style> 
 
< div id =container> 
< div class =topbottom top>< img src =http://placekitten.com/g/200/93/>< / div> 
 
< div id =dividerbar> Hello world< / div> 
 
< div class =topbottom bottom>< img src =http://placekitten.com/g/152/152/>< / div> 
< / div> 
  

有什么想法？

解决方案

我目前正在处理类似的问题，似乎有点棘手。我找到了一个解决方案，在safari中工作，但不会在铬和Firefox的工作。他们忽略了

  max-height：100％; 
  

属性。 检查并调整浏览器大小。

<虽然我不是100％确定你想要达到什么（你的代码在调整浏览器窗口大小时不会改变），我已经建立了这个。

让我知道是否是正确的方向

I'm trying to learn to use Flexbox. I have a page with two images separated by a bar in the middle, stacked top to bottom. I want the bar to stay the same size regardless of the browser and the two images to resize when the browser shrinks (keeping the original image size if there is extra space. I'm enforcing this through max-height on the containing divs). I can get the images to resize height-wise, but the width doesn't change to maintain aspect ratio.

I've read a couple similar questions and tutorials, but I can't seem to apply their solutions to fit my scenario. This solution seems to be the closest to my needs: http://goo.gl/iE6Wbh

Here is what I have so far. I don't know why it's causing the content to scroll on codepen either... http://codepen.io/anon/pen/VLvxgo

 <style>
    #container
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.topbottom
{
    flex: 3;
    display: flex;
}

.topbottom.top
{
    max-height: 93px;
}

.topbottom.bottom
{
    max-height: 152px;
}

.topbottom > img
{
    width: auto;
    height: 100%;
}

#dividerbar
{
    background-color: blue;
    width: 100%;
    height: 50px;
    margin: 20px 0;
}
    </style>

    <div id="container">
          <div class="topbottom top"><img src="http://placekitten.com/g/200/93" /></div>

        <div id="dividerbar">Hello world</div>

        <div class="topbottom bottom"><img src="http://placekitten.com/g/152/152" /></div>
    </div>

Any thoughts?

解决方案

I'm currently working on a similar problem and it seems to be a bit tricky. I found a solution which works in safari, but won't work in chrome and firefox. They ignore the

max-height: 100%;

property. Check this out and resize browser.

Although i'm not 100% sure what you are trying to achieve (your codepen doesn't change anyhow when resizing the browser window), i've build this one.

Let me know if it's the right direction

这篇关于CSS Flexbox图像不保留宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！