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

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%;
}

这也将确保图像保持正确的纵横比。