Question

我正在使用猫头鹰旋转木马，我不希望图像在移动尺寸上被挤压或压缩

   <!--=========================slider===========================-->
  <div id="main-slider" class="owl-carousel owl-theme">
    <div class="item text-center">
      <img src="img/front_girl1.jpg">
    </div>
    <div class="item text-center">
      <img src="img/front_girl_3.jpg">
    </div>
    <div class="item text-center">
      <img src="img/front_girl_2.jpg">
    </div>
  </div>

我的媒体屏幕上的CSS 1200px

#main-slider .item img{
 display: block;
 width: 100%;
 height:700px;
 z-index: -1;
}

我的CSS在480px上但是当我调整浏览器大小时它不起作用它只是压缩

#main-slider .item img{
    display: block;
    width: 100%;
    height:700px;
    background-position: center center fixed;
    z-index: -1;
}

任何建议???

Answer 1

猫头鹰旋转木马的宽度是多少？此外，您必须删除您的高度等级或将其设置为自动。您也可以添加：

.owl-carousel{
   width:100% !important;
}

此外，如果你使用bootstrap，你可以添加类＆＃34; img-responsive＆＃34;在图像上，以确保它是响应和＆＃34;中心块＆＃34;使图像在中心对齐

如何在媒体屏幕上固定和居中图像@media（最大宽度：480px）

1 个答案: