以給定的比例更改HTML佔位符圖片的寬度和高度

我有一個佔位符圖片，我知道真實圖片的大小。
例如，我的佔位符圖片是30x30，我的實景是1200 * 800。但我的屏幕尺寸只有600px寬。以給定的比例更改HTML佔位符圖片的寬度和高度

我給與真實尺寸的圖像就像下面

<img src="abc.png" width="1200px" height="800px"/>

但這大小比我的屏幕大小600px的寬。所以我添加一個像下面的css

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

結果是圖片將顯示爲大小600x600。如果我刪除height:auto它將顯示爲600x800。

我希望它顯示爲600x400與真實圖片的等比例。我該怎麼做？使用JQuery是可以的。

2014-11-14 lephix

HTML

<img src="abc.png"/>

和CSS

img { 
    width:600px; 
    height: 400px; 
    max-width:100%; 
    max-height:100%; 
}

沒有必要爲一個jQuery。

2014-11-14 10:14:08 user3687550

我有很多圖片的不同給出width和height屬性的頁面。 – lephix

hi @lephix然後像一樣使用圖像中的類，並使用您所需的寬度和高度編寫類名的css – user3687550

@lephix您可以對'width'和'height'使用內聯樣式，但對於'max- width' /'MAX-height'。 – Jayen

佔位符必須與原始圖像具有相同的寬高比。如果它有其他比例，則應使用JavaScript並將原始圖片比例存儲在某個變量中。然後，使用這些信息來設置max-width和max-height屬性的值（或甚至width和height）。

但是，如果你知道什麼寬度&高度的圖像將是，那麼你可以在你的CSS設置靜態值。就像這樣：

img { 
    max-width: 600px; 
    max-height: 400px; 
}

2014-11-14 10:16:17

使用javascript調整圖片大小？ – lephix

用它爲特定圖像設置CSS屬性：'max-width'和'max-height'。 –

它是不可能有一個設置的寬高比靜態佔位符包含動態比的圖像。

實施例：如果佔位符是600X400意思的縱橫比爲3：2個只有具有的3寬高比的圖像：2將完全適合在此例如：1200X800，900：600

因此，如果您有標記<img src="" height="100px" width="400px">，它將適用於上述尺寸爲1：4的圖像。但是，如果圖像是像800 * 800的東西，它會受到拖延和歪斜。

我建議以下標記

HTML

<img src="your src file"/>

CSS

img 
{ 
    width:600px; 
    height:auto;  
}

這將使圖像零售原始尺寸

2014-11-14 10:37:03 MarsOne

所以你wan't重新計算圖像動態地適合屏幕並且不會丟失圖像ra對吧？

所以你需要對圖像進行一些計算。

var newHeight = img.height/img.width * screenWidth; 
var newWidth = screenWidth;

我創建了一個演示它可以幫助你：

2014-11-14 11:01:11 Werner

回答