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

取消对象适配并更改为auto：

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

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

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

1 个答案: