Html 如何根据屏幕大小调整图像

假设我们在css属性中有宽度为2000px、高度为500px的图像。对于1080p显示器，如何正确配置此图像。我希望将此图像设置为任何屏幕大小，以便进行响应性设计。

如果要保持纵横比，请将宽度设置为100%，高度设置为自动

如果要覆盖整个父元素，则高度：100%，宽度：100%

这是您想要的：

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

如果您希望在不同的设备中以不同的方式缩放图像（或添加/覆盖某些样式以获得更高的响应），则需要使用CSS媒体查询。例如

img {
    display: inline-block;
    width: 25%; // Show 4 images in a row normally
    height: auto;
}

@media (max-width: 600px) {
  img {
    width: 100%; // Override width to show only one image in a row on smaller screens
  }
}

---

计算纵横比：2000:500->4:1，然后在css中使用100%:25%