如何自動調整移動網站的圖片大小？

我嘗試了谷歌搜索這個，仍然無法弄清楚如何調整圖像的寬度爲各種移動設備。這裏是我的嘗試：如何自動調整移動網站的圖片大小？

CSS：

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

HTML：

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
     <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> 
     <link rel="stylesheet" href="../includes/style.css"> 
    </head> 
    <img class="test" src="../includes/foo.jpg">

但圖像仍然被加載到它原來的縮放。我是一個CSS和HTML新手，所以任何幫助將是偉大的！

編輯：

感謝您的回覆。這是一個現在有效的修訂版本。

HTML：

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
     <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> 
     <link rel="stylesheet" href="../includes/style.css"> 
    </head> 
    <body width = "device-width"> 
     <img class="test" src="../includes/buoy_map.jpg"> 
    </body>

來源

2011-10-05 Richard

你給出了圖像的父元素的任何一個寬度？ – Gerben

你的'img'標籤應該放在'body'裏面。您實際上並不擁有身體標記，因此添加一個:-) – Bojangles

由於外部元素沒有定義寬度（並且正文缺失），因此您的css沒有任何效果。

另一種方法是提供已縮放的圖像。例如，http://www.sencha.com/products/io/根據觀看設備遞送已經縮小的圖像。

來源

2011-10-05 13:40:52 konsolenfreddy

img { 
    max-width: 100%; 
}

如果設置圖像的它包含的元素佔用100％。

來源

2011-10-05 13:37:56

在某些情況下，這很有用，但它會忽略圖像的縱橫比，可能會使其偏斜。 – jamesnotjim

在這種情況下，它應該包括高度：auto; – Geomorillo

這應該是公認的答案 – niry

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

來源

2013-08-28 19:22:49 squarcle

對於我來說，它的工作最好在圖像的CSS補充一點：max-width:100%;和未指定的HTML參數圖像的寬度和高度。這調整了寬度以適應設備屏幕，同時自動調整高度。否則高度可能會扭曲。

來源

2014-10-13 16:32:10 adrianTNT

如果使用引導3，只是在你的img標籤

<img class="img-responsive" src="...">

添加IMG響應類，如果你使用引導4，在IMG標記添加IMG流體類

<img class="img-fluid" src="...">

工作人員： max-width：100％，height：auto，a nd display：block to the image

來源

2017-05-04 09:18:47

我不知道爲什麼有人投票了這個答案。這對我很好。移動瀏覽器中的圖像擠壓得很好。謝謝。 –

身高：自動;爲我做了詭計。現在我的圖像會根據移動設備的分辨率調整大小。謝謝 –

如何自動調整移動網站的圖片大小？

回答

相關問題