javascript - 根据屏幕设置幻灯片宽度

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>

我想一个动态定位'.featured-image img'并为其添加宽度和高度的jQuery脚本将是做到这一点的方法。有没有比这更好的方法或更简单的脚本？任何帮助表示赞赏。

Answer 1

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

如果您需要它动态调整，那么您需要捕获 resize 事件：

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