• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

html 6次浏览

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

Sample fiddle

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

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

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


===========解决方案如下:

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

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

JSFiddle


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)