Question

我的幻灯片在每个方面都能正常工作，除了在调整到不同屏幕尺寸时完全失败的事实。

它在我的大屏幕上工作得很好，但在我的另一个屏幕上，它不适应并添加了一个水平滚动条。

我添加了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'并添加宽度和高度就可以了。有没有比那个或更简单的脚本更好的方法？任何帮助表示赞赏。

Answer 1

var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);

如果您需要动态调整，则需要捕获调整大小事件：

$(window).resize(function() {
  var screenWidth = $(document).width();
  $('.featured-image img').width(screenWidth);
});

根据屏幕设置幻灯片放映宽度

1 个答案: