javascript - 手动更改图像作为窗口大小

Question

我是用js根据窗口大小设置图片宽高的。但在某些情况下，当浏览器非常宽时，图像的高度会超过其所有父元素的高度。结果，图像的底部未显示。我该如何解决这个问题？

我在这个元素中使用了 bootstrap 和 swiper，我想要更改的图像在我的 swiper 分区中。我将所有图像的父元素的高度设置为 100%。这是我要动态更改图像的 js 代码。图片大小为2560*1440。

if(winWidth/winHeight < 2560/1440) {
     imgHeight = winHeight;
     imgWidth = winHeight/1440 * 2560;
     }else {
     imgWidth = winWidth;
     imgHeight = winWidth/2560 * 1440; 
     }
    attr = "width:" + imgWidth + 'px;height:' + imgHeight + 'px;margin-left: -' + imgWidth/2 + 'px;margin-top:-' + imgHeight/2 + 'px';
    $('.main .swiper-slide > img').attr('style',attr);

附言:对不起，我没有说清楚。您提供的以下方法在垂直 View 中缩小图像，因此在页面中留下很多空白。其实我希望我的图像的高度占据整个窗口的高度，无论是在垂直窗口还是水平窗口。如果窗口足够宽，则图像的宽度等于窗口的宽度，否则剪切图像的宽度并使其也等于窗口的宽度。

Answer 1

@patstuart是的，直接通过 CSS 处理会好得多。无需编写一行 JavaScript 即可解决多少样式问题(请看图)，这真是太神奇了。因此，为了回答您的第二个问题，让我们弄清楚如何使用 CSS 来完成它。在没有看到 fiddle 或您的实际页面/图像的情况下，我将在这里从臀部拍摄。如果我理解正确，无论屏幕的宽度/高度是多少，您都希望完整图像以正确的比例显示。如果是这样，这里有一个不错的小技巧:

.main .swiper-slide {
  width: 100%;
  height: 0;
  /* Padding bottom should be the height's ratio to the width.
     Which in this case, would be 56.25% */ 
  padding-bottom: 56.25%;
}
.main .swiper-slide > img {
  width: 100%;
}

这就是 CSS 处理纵横比的方式。如果这能解决您的问题或您有任何其他问题，请告诉我。 CSS 是为样式设计的，所以总是首先寻找解决方案。