如何根據屏幕尺寸調整圖像

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