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

Question

我正在使用无限幻灯片插件(https://www.jqueryscript.net/slider/Infinite-Scroller-Plugin-jQuery.html)。它在带有背景图像的桌面上运行完美，但在移动设备上，我必须显示图像的全宽。我试图为 .scroll1 li 类添加一些宽度，但我没有得到所有 slider 。

知道如何在移动设备上使用完整图像吗？我的意思是我必须在媒体查询中使用什么代码？

你能帮我解决这个问题吗？

桌面图片

移动图像。

$(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>

Answer 1

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

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