时间戳

首页 > 解决方案 > 图片：我需要 100% 的高度比 100% 的宽度更重要

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

问题描述

基本上，无论屏幕尺寸如何，我都有一个需要保持 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>

标签： cssimageheightresponsive

解决方案

带走 object-fit 并更改为 auto：

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

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

推荐阅读