Question

我在网站上有两个面板，其中的图像始终是屏幕的全宽和高度。

.panel {
    float:left;
    width:50%;
    position:relative;
    background-size:cover
}
.panel img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

基本上我试图得到与背面尺寸（左侧面板）相同的结果，右侧面板里面有img标签。

我尝试了一些不同的东西，但是当页面缩放为背景大小时，保持良好的图像比例没有运气

有没有人知道使用jquery执行此操作的任何技巧或好方法？

Answer 1

解决IE的问题 - 使图像宽度基于像素。我在小提琴中将宽度改为800px并将其拉直。

像这样：

.panel {
    float:left;
    width:50%;
    position:relative;
    background-size:cover
}
.panel img {
    position:absolute;
    top:0;
    left:0;
    width:800px;
    height:100%;
}

Here's a fiddle

jQuery - 模拟背景大小的封面

1 个答案: