图片：我需要 100% 的高度比 100% 的宽度更重要

Question

基本上，我有一个图像需要保持 100% 的高度，无论屏幕尺寸如何，因此它具有响应性，并且可以切断左右两侧（而不是顶部和底部）。

我目前将图像设置为对高度和宽度都做出响应，但在某些宽度和高度上，它会切断图像的顶部和底部。

这是我的 CSS：

.banner{
    width:36%;
    float:left;
    min-height: 100vh;
    height: 100%;
}

.banner img {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

PHP（WordPress）：

<div class="banner">    
    <?php the_post_thumbnail(); ?>
</div>

Answer 1

去掉object-fit并改为auto：

.banner img {
    display: block;
    width: auto;
    height: 100vh;
}

或对象填充，但会扭曲图片，您确定不希望它作为背景图片吗？ https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit