貓頭鷹輪播上的圖像在移動設備上被放大，我如何更改它以便它在移動設備上顯示所有圖像？

Question

這是它在桌面上的外觀：

這是它在手機上的樣子：

我有旋轉木馬的標准屬性（沒什么特別的，只是幻燈片）。 我只想讓它縮放並在移動設備上顯示整個圖片，而不是放大隨機部分。

HTML

<div class="home-banner">
    <div class="owl-carousel owl-theme home-slider">
        <div class="item pro_nw" style="background-image: url({{asset('public/frontend/images/slide1_v4.jpg')}});">
        </div>
        <div class="item pro_nw" style="background-image: url({{asset('public/frontend/images/slider-2.jpg')}});">
        </div>
        <div class="item pro_nw" style="background-image: url({{asset('public/frontend/images/slider-3.jpg')}});">
        </div>
    </div>
</div>

CSS

.home-slider{position: relative;}
.home-slider,
.home-slider .owl-stage-outer,
.home-slider .owl-stage-outer .owl-stage,
.home-slider .owl-stage-outer .owl-stage .owl-item,
.home-slider .owl-stage-outer .owl-stage .owl-item .item{height: 100%;}
.home-slider .owl-stage-outer .owl-stage .owl-item .item{
    position: relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
    margin-bottom: 20px;
    min-height: 730px;
}

它必須是 CSS 中的屬性之一（我認為）。 我玩了一些屬性，但它以奇怪的方式擴展。

Answer 1

對於移動媒體查詢，請確保更改背景大小以包含。 保持屏幕的原始尺寸比移動屏幕寬。

Answer 2

首先將背景大小更改為包含。

background-size: contain;

然后檢測設備的實際屏幕以根據自己的喜好調整圖像大小

@media screen and (max-width: 768px) {      
    .home-slider .owl-stage-outer .owl-stage .owl-item .item{      
        //size you wanted 
      //for example---
       width: 50%;
       height: 50%;
    
    } 
} 

Answer 3

對於移動響應，根據屏幕使用媒體查詢

@media only screen and (max-width:600px) /* specify preferred width here*/
{
/*statement*/
}