css - 画像の向きに基づいて div サイズを変更する

Question

アプリのウェブ ランディング ページを作成してきましたが、横向きの画像が押し潰され、縦向きに見えてしまいます。高さが幅よりも大きい場合、divを画像のサイズに合わせて調整する必要があるため、divを画像に合わせて自動調整します。どうすればそれを行うことができますか。

画像を表示するために使用しているコードのサンプル:

<div id="favphoto">            
    <a href="/event/%event%/photo/%id%.jpg" target="_blank">
        <img border="0" src="/event/%event%/photo/%id%.jpg" />
    </a>
</div>

呼び出される正しい画像にdivの自動サイズを設定したいのですが、そうでない場合は、これが間違っているだけです。

Answer 1

div を に設定するdisplay:inline-blockと、コンテンツと同じ幅になります。

JSFiddle の例

<div class="favphoto">            
    <a href="#" target="_blank">
        <img border="0" src="http://lorempixel.com/400/200/sports/" />
    </a>
</div>

<div class="favphoto">            
    <a href="#" target="_blank">
        <img border="0" src="http://lorempixel.com/200/400/sports/" />
    </a>
</div>

.favphoto {
    display:inline-block;
    vertical-align:top;
}

.img {
    display:block;

}