调整页面大小并裁剪 div - CSS 或 JS

Posted 2023-02-25

【中文标题】调整页面大小并裁剪 div - CSS 或 JS

【英文标题】：resize page and crop div - CSS or JS

【发布时间】：2015-03-09 12:03:28

【问题描述】：

我的 html 页面有问题。此页面有 2 个元素：

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;

【问题讨论】：

谢谢 :) 我添加了一些代码，只是 DIV 的 CSS

【参考方案1】：

尝试为徽标设置 background-position:fixed。

【讨论】：

Nothing ... 包含背景的 div 是 : position:absolute; z-索引：2；宽度：40%；高度：100%；背景图像： url('../immagine.jpg');背景大小：包含；背景重复：不重复；背景位置：固定；调整大小：无；溢出：无；

【参考方案2】：

您可以使用calc() 将负值作为左 div 的左坐标来进行图像裁剪，例如：

left:calc(35% - 400px);

其中 35% 是要裁剪图像的水平点，400px 是左侧 div 的宽度。

#cendivposition: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>