使用百分比值調整圖像大小，同時更改縱橫比

我想僅使用百分比值設計迷你頁面，以適應各種分辨率。我的問題是，當我在「高度」和「寬度」的CSS值在所有「IMG」標籤的使用百分比值，它們規模恰當，但它們的縱橫比保持不變，導致這樣的事情：DEMO 使用百分比值調整圖像大小，同時更改縱橫比

我的問題是如何讓它們具有1：1的寬高比？

這裏是我的代碼：

img { 

width: 20%; height:20%; 
margin: 2% 2% 2% 2%; 
padding: 0 0 0 0; 
border: 2px solid #666; 
opacity:0.5; 
float:left; 
}

來源

2013-07-29 user2629665

這個問題已經回答見下 http://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio – Rex

設置鏈接「img」標籤的「max-height」和「max-width」到100％沒有任何改變。 – user2629665

您是否使用過指定的全部java腳本方法，或者只是將最大高度/寬度添加到圖像的css中。 – Rex

添加和嘗試

img { 
     border: 0; 
     max-width: 100%; 
     height: auto; 
     width: auto\9; /* ie8 */ 
    } 



    #logo { 
     width: 20%; 
     margin: 2% 2% 2% 2%; 
     padding: 0 0 0 0; 
     border: 2px solid #666; 
     opacity:0.5; 
     float:left; 
     } 

<div id="logo"><img src="images/logo.png" /></div>

來源

2013-07-29 09:34:30

我不明白這對我有何幫助......我想保留我的邊框，當我使用您的代碼而不是我的代碼時，這些圖片顯示爲正常尺寸。 – user2629665

現在編輯試試嗎？ –

再次，沒有改變無關。 – user2629665

對於您需要在同一個像素值的所有圖像，這樣，當你與比例調整它們的大小你想要的方面，它會保持其長寬比。例如，如果圖像的原始尺寸是1000 x 1000像素，如果您調整爲％時間尺寸，則寬度和高度將按照平方比例縮放，因爲寬度和高度都相等。如果你想讓它們在一致的方面，所有應該有統一的像素值。

來源

2013-07-29 09:35:29 Nitesh

我想，如果他們的寬高比已經是1：1，那麼它可以正常工作，但我正在尋找不同的解決方案，我確定有一個，我真的不想調整它們全部我自己在PS。 – user2629665

然後，您應該使用rect使用背景剪輯屬性。 – Nitesh

這將做什麼，它會讓你的圖像裁剪到你正在尋找的方面。但我仍然堅持保留我原來的發佈解決方案。因爲這將確保總體一致性。 – Nitesh

使用百分比值調整圖像大小，同時更改縱橫比

回答

相關問題