我已经搜索了一些与我的案例相关的解决方案,但所有问题与我的案例并不完全相同。
图像必须设置width:100%
为height:auto
容器 (300x150)。我不知道在我的情况下上传图像的宽度是多少,所以我想我不能使用背景图像作为解决方案。
这不起作用:
#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 解决方案,但不是背景图像。