Javascript 猫头鹰转盘上的图像在移动设备上放大，我如何更改它，使其在移动设备上显示所有图像？

这是它在桌面上的外观：

这就是它在手机上的外观：

我有旋转木马的标准属性（没有什么特别的，只是一个幻灯片）。我只想让它在手机上缩放并显示整个画面，而不是放大随机部分

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中的属性之一（我认为）。我使用了一些属性，但它的伸缩方式很奇怪。

对于移动媒体查询，请确保更改背景大小以包含。

---

保持屏幕的原始尺寸比移动屏幕宽。

首先更改背景尺寸以包含

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*/
}

---

我尝试了这个，将宽度和高度更改为不同的值，包括100%的宽度和高度。但是这种情况一直在发生嗨，我想你需要对css进行大量篡改才能获得正确的大小，尝试更改

宽度：auto

或

高度：100vh

此外，我在这个链接中看到过与你有相同问题的人，下面这个代码笔是由Sir@Kurtis Rogers在同一页上制作的，我认为您希望为页面实现的方式非常感谢您的帮助，我将研究：）很高兴帮助：）

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