Question

我有以下HTML

.wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.no-padding {
  padding: 0 !important;
}

.home-slider img {
  margin-right: 6px;
  float: left;
  width: 35px;
  position: relative;
  top: -4px;
}

.home-slider-wrap {
  position: relative;
}

.home-slider-wrap .bg-img {
  height: 500px; 	
  width: auto;
  max-width: none;
}

.img-full {
  width: 100%;
}


@media (max-width: 767px) {
  .home-slider-wrap .bg-img { 
    min-height: auto;
    min-width: 100%;
    width: 100%;
    height: auto;
  }
}

<div class="wrapper">
  <div class="container-fluid no-padding">
    <div class="home-slider-wrap">
      <div class="home-slider">
        <div>
          <img src="https://g5-assets-cld-res.cloudinary.com/image/upload/q_auto,f_auto,fl_lossy/g5/g5-c-1t2d31r8-berkshire-communities/g5-cl-i2pbvvuq-creekstone/uploads/pet-friendly.jpg" class="bg-img img-full ing-responsive" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

我正在尝试调整此图像的大小，但同时也为小于768像素的设备保持最小高度;但是正如您在下面的演示中看到的那样，这是行不通的。

当为移动设备调整页面大小时，猫和狗的部分不可见。

Demo

我该如何解决这个问题？任何帮助表示赞赏。

Answer 1

也许你可以试试这个css：

background-size: cover;
background-position: center;
background-repeat: no-repeat;

Answer 2

您可以尝试使用media query

Answer 3

您可以使用媒体查询定位低于768像素宽的设备，以定义如下所示的样式 -

@media (max-width:767px){
    .home-slider-wrap .bg-img {
        min-height: auto;
        min-width: 100%;
        width: 100%;
        height: auto;
    }
  }

如何调整响应图像的大小并保持高度

3 个答案: