如何在媒體屏幕上固定和居中圖像@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;
}

此外，如果您使用引導程序，您可以在圖像上添加“img-responsive”類以確保它具有響應性和“中心阻止”以使圖像在中心對齊