Javascript 将图像手动更改为窗口大小

我使用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);

if（winWidth/winHeight<2560/1440）{
imgHeight=winHeight；
imgWidth=winHeight/1440*2560；
}否则{
imgWidth=winWidth；
imgHeight=winWidth/2560*1440；
}
attr=“宽度：”+imgWidth+”px；高度：'+imghight+'px；左边距：-'+imgWidth/2+'px；页边距顶部：-'+imghight/2+'px'；
$（'.main.swiper slide>img'）.attr（'style'，attr）；

附言： 对不起，我没说清楚。您提供的以下方法在垂直视图中缩小图像，从而在页面中留下大量空白。实际上，我希望我的图像的高度占据整个窗口的高度，无论是在垂直窗口还是水平窗口。如果窗口足够宽，则图像的宽度等于窗口的宽度，否则将图像按宽度剪切，使其也等于窗口的宽度

是正确的，直接通过CSS处理这个问题要好得多。不用编写一行JavaScript就可以解决许多样式问题（如图所示），这非常令人惊讶。为了回答你的第二个问题，让我们看看如何使用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是为设计样式而设计的，所以一定要先在那里寻找解决方案。

2c：这是对Javascript的误用，你肯定会遇到类似这样的奇怪错误。尝试使用CSS将图像大小设置为其父图像的相对大小。如果未计算大小，则应使用不同的容器类型（例如，div而不是span）。@patstuart我希望根据窗口的纵横比而不是窗口的宽度来更改图像。CSS可以用来实现这一点吗？PS：我将第6行代码改为

imgHeight=windth/2560*1300

，解决了我的问题。虽然不是一个好的解决方案。@JenkinsY使用vh和vw单位怎么样？它分别是高度和宽度的%，这样可以保持与窗口相同的纵横比