将图像的比率保存在高度调整大小的柔性容器中

我在flex容器中的图像出现问题。当容器/窗口高度减小/调整大小时，我希望它保持比例。将图像的比率保存在高度调整大小的柔性容器中

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 60%; 
 
    border: 1px solid red; 
 
} 
 

 
.image-container { 
 
    display: flex; 
 
    align-items: center; 
 
    max-width: 30%; 
 
    height: 100%; 
 
    background: green; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex: 1; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: yellow; 
 
}

<div class="wrapper"> 
 
    <div class="image-container"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/1200px-Clouds_over_the_Atlantic_Ocean.jpg" alt=""> 
 
    </div> 
 
    <div class="content"> 
 
    <span>Some content</span> 
 
    </div> 
 
</div>

当您尝试这样做，你可以看到，只有图像高度的变化，但宽度保持不变，图像被那种捉襟见肘。

当我从图像容器中删除'display：flex'时，图像大小调整良好。我让它变成了flex，因为我希望它能够居中。

有没有一种方法来保持比例和流畅地调整图像和容器的其余部分？

来源

2017-12-03 somedev

在这个'fiddle'无拉伸，宽度和高度调整大小。 – Pedram

尝试调整输出窗口的大小。 – somedev

@pedram，通常在我的应用程序中我有一个选项，当用户执行特定操作时，此包装容器会降低其高度。这就是为什么我在这个时候谈论窗口大小调整的原因。当你不断减小输出窗口的高度时，你会看到图像的宽度不会改变。 – somedev

刚上IMG添加object-fit: cover;标签：

img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

JSFiddle

来源

2017-12-03 07:00:15 Sonia

将图像的比率保存在高度调整大小的柔性容器中

回答

相关问题