为什么我的图片不能在移动设备上显示高度？

Question

我希望桌面上的图片保持不变，但移动设备上的图片高度更高。我应该在代码中更改什么？我也在使用 Bootstrap 5。

<div class="container">
        <div class="row">
            <div class="col-12">
                <img src="/images/section1/home-image.jpg" class="img-fluid" id="img1" alt="man on boat">
                <img src="/images/section1/home-logo.png" class="img-fluid" id="img2" alt="logo Seafarer">
            </div>
        </div>
    </div>

#section1 {
position:relative;

}

#img2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

Answer 1

给你...

我认为Bootstrap不可能做到这一点。如果我是你，我会使用 @media 查询。

将此添加到您的 CSS：

@media only screen and (max-width: 575px) {
   .col-12 {
      height: 500px; // Adjust the height
   }

   #img1 {
      object-fit: cover;
      height: 100%;
   }
}

添加 object-fit: cover; 很重要，否则您的图像会被搞砸。尝试删除此行以了解我在说什么。

如果有帮助请告诉我。

为什么我的图片不能在移动设备上显示高度？

Why my image doesn't go on height on mobile?

bootstrap-5