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 Example

<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;