Question

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

我在这个项目中使用了bootstrap和swiper，我想改变的图像在我的swiper部门内部。我设置了所有图像的父元素＆＃39;高度为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);

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

Answer 1

@patstuart是正确的，这可以通过CSS直接处理。令人惊讶的是，如果不编写一行JavaScript，可以解决多少样式问题（go figure）。所以要回答你的第二个问题，让我们弄清楚如何用CSS完成它。没有看到小提琴或你的实际页面/图像，我只会在这里拍摄。如果我理解正确，无论屏幕的宽度/高度如何，您都希望以正确的比例显示完整图像。如果是这样的话，这是一个不错的小技巧：

.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是为造型而设计的，所以总是首先寻找解决方案。

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

1 个答案: