控制寬度和高度爲身體的圖像寬高比

我在我的網站上出現了這兩個圖像，我從另一家公司的服務器上拉出。我需要這些照片來與瀏覽器窗口進行比例縮放，所以我給了它們一個％寬度和高度來與正文一起縮放。控制寬度和高度爲身體的圖像寬高比

問題是這些圖像中的一些是不同的大小，我需要所有的圖像看起來完全相同。當我知道圖像寬度和高度的值時，這很容易實現，因爲我可以裁剪或調整大小。但是，如何保持可伸縮寬度和高度的比例？

我認爲需要一些JavaScript來做到這一點。這裏是我有的CSS：

html { 
    width: 100%; 
    height: 100%; 
} 
body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
.image { 
    width: 40%; 
    height: 40%; 
    margin: 1%; 
}

來源

2012-10-17 AzzyDude

圖像是混合方向還是橫向或縱向？通常情況下，您可以將寬度或高度設置爲百分比，並將其他設置爲自動，但混合方向需要將類附加到圖像上，以識別它是哪一個。 – cimmanon

他們都將是風景。只是高度有些波動，所以看起來不合格。 – AzzyDude

只用CSS做它會花你很多時間來優化所有brosers。

，你可能使用Perfect background image

來源

2012-10-17 12:56:32 easwee

如果你不關心IE8實現這一目標進行一些修改和JS，你可以指定width。大多數瀏覽器會爲你保持高寬比。

來源

2013-05-15 22:35:46

控制寬度和高度爲身體的圖像寬高比

回答

相關問題