html - 如何在媒体屏幕@media 上固定和居中图像(最大宽度 : 480px)

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 ，您可以在图像上添加类“img-responsive”以确保它是响应式的，并添加“center-block”以使图像居中对齐