javascript - 如何在移动设备中显示图像的实际宽度？

我正在使用无限幻灯片插件（https://www.jqueryscript.net/slider/Infinite-Scroller-Plugin-jQuery.html）。它可以在带有背景图像的桌面上正常工作，但是在移动设备上，我必须显示图像的全宽度。
我试图为类.scroll1 li添加一些宽度，但没有获得所有的滑块。

有什么想法如何在手机上使用完整图片吗？
我的意思是我必须在媒体查询中使用什么代码？

您能帮我这个忙吗？

桌面图片


手机图片。

$(function(){
		$('.scroll1').infiniteslide({
			'speed': 100,
			'direction' : 'left',
			'pauseonhover': false
		});
	});

   html,body{
	margin: 0;
	padding: 0;
	height: 100%;
   -webkit-font-smoothing: antialiased;
}
	.scroll1 {
		display: none;
		padding: 0;
		margin: 0;
	}
	.scroll1 img {
		vertical-align: bottom;
	}
	.scroll1 li {
        width: 100%;
         }
	.banner_bg{
             background-repeat: no-repeat;
		    background-size: cover;
		    width: 100%;
		    height: auto !important;
		    background-position: center;
		    min-height:600px;
}

.application_slider_1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg');
}
.application_slider_2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('http://all4desktop.com/data_images/original/4237670-images.jpg');
}
.application_slider_3{
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('http://s1.bwallpapers.com/wallpapers/2014/05/09/blue-images_034357941.jpg');
}
.application_slider_4{
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('https://www.bmw.ca/content/dam/bmw/common/all-models/4-series/gran-coupe/2017/images-and-videos/images/BMW-4-series-gran-coupe-images-and-videos-1920x1200-04.jpg.asset.1487328216285.jpg');
 }

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Infinite-Scroller-Plugin-jQuery/infiniteslidev2.js"></script>

<ul class="scroll1">
		<li><div class="application_slider_1 banner_bg"></div></li>
		<li><div class="application_slider_2 banner_bg"></div></li>
		<li><div class="application_slider_3 banner_bg"></div></li>
		<li><div class="application_slider_4 banner_bg"></div></li>
	</ul>

最佳答案

尝试将min-height与vh值一起使用，如下所示：

.banner_bg{
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: auto !important;
            background-position: center;
            min-height:60vh;
}

关于javascript - 如何在移动设备中显示图像的实际宽度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48786462/