[英]Set slideshow width according to the screen
My slideshow's working correctly in every aspect except the fact that it's a total failure when it comes to adjusting to different screen sizes. 我的幻灯片在各个方面都可以正常工作,但要适应不同的屏幕尺寸完全失败。
It works like it should on my big screen, but on my other one it doesn't adapt and adds a horizontal scroller. 它的工作方式与在我的大屏幕上应该是一样,但是在我的另一个屏幕上却无法适应,并添加了水平滚动条。
I added width 100% to it but as I've found out the right way to do this is by a javascript code that adjusts everything dynamically. 我在其中添加了100%的宽度,但是我发现正确的方法是通过JavaScript代码动态调整所有内容。 The problem is, I've never had any prior experience doing this and don't know where to begin. 问题是,我以前从未有过这样做的经验,也不知道从哪里开始。 My page has jQuery loaded by the way. 我的页面顺便加载了jQuery。
This is the sample structure of slideshow: 这是幻灯片的示例结构:
<div class="featured-image">
<div style="overflow: hidden;height: 450px;"><img width="1950px" height="" alt="4" src="image.jpg"></div>
<!-- end .featured-price -->
</div>
I suppose a jQuery script to target '.featured-image img' dynamically and add the width and height to it would be the way to do this. 我想一个jQuery脚本动态地定位'.featured-image img'并为其添加宽度和高度将是这样做的方法。 Is there any way better than that or a simpler script? 有没有什么比这更好或更简单的脚本了? Any help is appreciated. 任何帮助表示赞赏。
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
If you need it to adjust dynamically then you'll need to capture the resize event: 如果需要它来动态调整,则需要捕获resize事件:
$(window).resize(function() {
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.