[英]how to set the body width according to screen resolution using javascript?
[英]Set slideshow width according to the screen
我的幻灯片在各个方面都可以正常工作,但要适应不同的屏幕尺寸完全失败。
它的工作方式与在我的大屏幕上应该是一样,但是在我的另一个屏幕上却无法适应,并添加了水平滚动条。
我在其中添加了100%的宽度,但是我发现正确的方法是通过JavaScript代码动态调整所有内容。 问题是,我以前从未有过这样做的经验,也不知道从哪里开始。 我的页面顺便加载了jQuery。
这是幻灯片的示例结构:
<div class="featured-image">
<div style="overflow: hidden;height: 450px;"><img width="1950px" height="" alt="4" src="image.jpg"></div>
<!-- end .featured-price -->
</div>
我想一个jQuery脚本动态地定位'.featured-image img'并为其添加宽度和高度将是这样做的方法。 有没有什么比这更好或更简单的脚本了? 任何帮助表示赞赏。
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
如果需要它来动态调整,则需要捕获resize事件:
$(window).resize(function() {
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.