如何根据屏幕尺寸调整图像

Question

假设我们具有2000像素宽度的图像& css属性中的500px高度。对于1080p显示器，我如何正确配置此图像。我希望将此图像设置为适用于响应式设计的任意屏幕尺寸。

Answer 1

，如果你想保持宽高比然后把宽度：100％和height：汽车

如果要覆盖整个父元素

则高度：100％和width：100％

Answer 2

这是什么你想：

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

如果你希望你的图像以不同比例（或添加/替换某些样式更responsivenss）在你需要使用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 
    } 
} 

Mozilla Documentation on CSS media queries

W3Schools tutorial on CSS media queries