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;

}