高さプロパティの流体画像をHTMLで設定

Question

流体レイアウトのサイトで、すべての幅と余白などのパーセンテージを使用して作業しています。私はimg { max-width: 100% }トリックを使用して画像を作成したいと思いますが、少し問題があります。

私はembedagramを使用してアカウントから最新のInstagram写真を取得し、500 x 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で画像の大きさのスタイルを次のようになります。私はそれはあなたがよりも優先して、あなたのCSSを取得するつもりだ唯一の方法だと信じてい

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

を！マークアップの属性設定。

属性を完全になくすことができますが、スクリプトにはプラグインを最初に含めないように修正するか、設定した後にリセットするというスクリプトが必要です。