如何仅使用HTML和CSS保留Photo的纵横比？

Question

我采用响应设计的东西有点慢，但我理解它是如何完成的。只有一件事我不明白。出于某种原因，我不记得在我制作网站的整个10年中遇到过这个问题。

我有一张大约1920px X 1080px的大照片。我不想削减它因为我知道人们在更大的屏幕上浏览网页。我现在面临的问题是这张照片是水平居中的页面（位于页面顶部主导航下方），即使我的网站其余部分按照应有的方式向上和向下缩放，照片也是如此当窗口大小变化/变小/变大时，会丢失其宽高比。

当网站缩放到不同的分辨率/尺寸时，如何确保图像保留其纵横比？

我更喜欢非JavaScript解决方案，因为此特定网站的主要要求之一是无JavaScript网站。否则，我会做一些计算并自己缩放图像。

Answer 1

您必须修正图像的高度或宽度，才能使用正确的宽高比进行缩放。图像是内联块元素，因此我们可以设置它们的尺寸。

尝试：

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

这是一个example。尝试调整窗口或画布的大小。

Answer 2

您只需为图片添加宽度＆amp;给出最大宽度，使其不超过屏幕端口。高度将根据纵横比自动调整。

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

Answer 3

让浏览器或您的设备（手机，电脑屏幕）计算图像尺寸

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