调整页面和裁剪div - CSS或JS

Question

我的HTML页面存在问题。此页面包含两个元素：

• 1 div，页面左侧有position: absolute，是页面的徽标
• 1 table始终位于页面的中心。

如果我调整页面大小，表格始终位于页面的中心，但我希望div在此模式下裁剪背景：

我怎么能这样做？

左div的css是：

position:absolute;
z-index:2;
width:40%;
height : 100%;
background-image : url('img.png');
background-size : contain;
background-repeat : no-repeat;
background-position:fixed;
resize: none;
overflow: none;

Answer 1

尝试设置背景位置：固定徽标。

Answer 2

您可以使用calc()给出负值作为左侧div的左侧坐标来执行图像裁剪，如：

left:calc(35% - 400px);

其中35％是您要裁剪图像的水平点，而400px是左边div的宽度。

#cendiv{position:absolute;
width:30%;
height: 20%;
background-color: yellow ;
left:35%;
top:40%;
}

#leftdiv {position: absolute ;
width:400px;
left:calc(35% - 400px);
top:0 px;
}

#leftdiv img {
width:100%;
}

<div id="cendiv"></div>

<div id="leftdiv">

<img src="http://www.freeimages.com/assets/182924/1829230933/leaf-collection-1-895724-m.jpg"> 

</div>