Question

我搜索了一些与我的案例相关的解决方案，但所有问题与我的案例并不完全相同。

对于容器（300x150），图片必须设置为width:100%和height:auto。我不知道在我的情况下上传图片的宽度是多少，所以我想我不能使用background-image作为解决方案。

这不起作用：

#image-container {
 display: block;
 position: relative;
 width: 300px;
 height: 150px;
 overflow: hidden;
}
.img {
 width: 300px;
 height: auto;
 position: absolute; /*this is for my working frame, can't change*/
}

演示链接： http://jsfiddle.net/bardirian/zPg5m/

---更新 -

它适用于btlr.com的背景图像看这里更新的演示： http://jsfiddle.net/bardirian/zPg5m/7/

当我尝试将此添加到我的html时，我发现另一个问题是jquery元素需要从html导入图像，所以我仍然在寻找更好的css解决方案，但不是背景图像。

Answer 1

这样的事情

<div id="image" class="clearfix blog-image" 
    style="background:   url('http://i.imgur.com/5d8taEj.jpg') center center no-repeat;
    background-size: contain;
    ">


</div><br />

background-size：contains; - 这将适用于后台，我刚刚在您的演示中检查过它（尝试减小div的大小）

如何居中高于容器的图像？

1 个答案: