尝试使图像大小与不同的屏幕分辨率保持一致

Question

所以我正在建立一个网站，假设有一个图像幻灯片 我为它设置了一个div：

<div id="slideshow">
</div>

及其相应的CSS：

#slideshow {
    position: absolute;
    height: 28%;
    width: 99.9%;
    top: 10.5%;
    margin: 0;
}

我一直在尝试找到适合div的图像大小，以便在不同的屏幕上显示不同的图像。我已经尝试找到一张不必要的大图片，以便使用height: 100%和width: 100%

“缩小”到div

但是在我测试的两个屏幕上它总是变得不一致，通常太拉伸了。一个屏幕的分辨率为1336x768，另一个屏幕的分辨率为1920x1080。 如何防止图像在不同屏幕上更改其比例？ （我想到了一个横幅，以及它如何在没有拉伸的情况下在每个屏幕上保持一致）

Answer 1

通常，在使用可在多种屏幕分辨率下工作的任何响应式设计时，请使用以下内容。

img {
  height: auto;
  max-width: 100%;
}

这也可以确保图像保持正确的宽高比。