與height屬性流體圖像HTML

Question

設置我工作的網站上有一個流體佈局，使用百分比爲所有的寬度和利潤，這樣的。我想用img { max-width: 100% }技巧，使流體圖像爲好，但我已經遇到了一點問題。

我使用embedagram抓住從一個賬戶的最新Instagram的照片和500×500像素顯示。這工作得很好，但它這樣做的方式是直接折騰尺寸爲HTML像這樣：

<img src=" " title=" " width="500" height="500" border="0" align="absmiddle"> 

所以，max-width仍然有效，但圖像不再縮放比例 - 它只是squishes和被扭曲。 max-height: 100%沒有幫助。我有一個艱難的時間理解Instagram的API文檔，以及如何將轉換爲JavaScript，否則我可能會放棄embedagram，只是做我自己。

Answer 1

你只需要添加height: auto你的風格聲明：

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

這裏有一個小提琴：http://jsfiddle.net/VDB7A/

Answer 2

速戰速決將使用重要的指導與CSS樣式的圖像的尺寸：

img { 
    width: 100% !important; 
    height: 100% !important;   
} 

我相信那就是你會得到你的CSS採取優先於唯一的出路標記中的屬性設置。

一個清潔的解決方案可能是完全消除的屬性，但是這將涉及到一些腳本 - 要麼修改插件不包括他們 - 或者重置他們，他們已經成立後的第一個地方。