使圖像更改大小以適合屏幕

Question

我有一個圖像作爲標題，當屏幕較小時，例如在iPhone或iPad上查看網站時，圖像對於屏幕來說太大。

該圖片涵蓋導航並使網站無法使用。

我需要找到一種方法來使圖像更改大小與屏幕大小相關。

我該怎麼做呢？

Answer 1

我假設您的容器的流體寬度爲100％，並且可以很好地適應不同的屏幕尺寸。在這種情況下，您可以使用

img { 
    max-width: 100%; 
} 

並且圖像永遠不會超過其父容器寬度。
或一些從響應式設計領域的更復雜的解決方案：

• Adaptive Images
• Picturefill

Answer 2

您可以使用CSS媒體查詢。

在這個例子中，當屏幕寬度小於1,024像素x它將設置圖像最大寬度OT父元素的100％：

@media screen and (max-width: 1024px){ 
    img { max-width: 100% } 
} 

選擇由所述設備的最大分辨率寬度（ipad公司在橫向模式）爲此你想要做到這一點。

您可以在{}中設置其他任何樣式。

但它仍然爲用戶下載完整圖像。

關於媒體查詢的更多信息here。