猫头鹰旋转木马上的图像在移动设备上放大，我如何更改它以在移动设备上显示所有图像？

如何解决猫头鹰旋转木马上的图像在移动设备上放大，我如何更改它以在移动设备上显示所有图像？

这是在桌面上的样子：

这就是它在移动设备上的样子：

我有轮播的标准属性（没什么特别的，只是一个幻灯片）。我只是想让它在移动设备上缩放并显示整个图片，而不是放大随机部分。

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 中的属性之一（我认为）。我尝试了一些属性，但它以奇怪的方式扩展。

解决方法

对于移动媒体查询，请确保将 background-size 更改为包含。保持屏幕的原始尺寸比移动屏幕更宽。

首先更改要包含的背景大小。

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%;
    
    } 
}

对于移动响应，根据屏幕使用媒体查询

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