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;

}

根据图像方向更改div大小

1 个答案: