根据图像方向更改 div 大小答案

【问题标题】：change div size based on image orientation根据图像方向更改 div 大小
【发布时间】：2013-10-04 17:10:09
【问题描述】：

我一直在为我的应用制作网页登录页面，但它不断挤压横向图像并考虑其纵向。我希望 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 自动调整为被调用的正确图像，如果不是我只是在解决这个问题。

【问题讨论】：

我不确定是否理解，但您有用于最小宽度、最小高度的 css 或将宽度/高度设置为自动。也许这会有所帮助。
您是否有任何您正在尝试的示例代码，如果有，请发布它，它将有助于提供更好的解决方案，而不仅仅是一个通用和开放式的问题。
默认情况下，DIV 会一直延伸到整个屏幕。您必须有一些 CSS 或某些父容器导致此问题。

标签： css image html

【解决方案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;

}

【讨论】：

谢谢你的工作，非常感谢大家的帮助