Css 使用剪辑路径后，无法删除图像周围的空白_Css

Css 使用剪辑路径后，无法删除图像周围的空白

css

Css 使用剪辑路径后，无法删除图像周围的空白,css,Css,我无法删除此剪辑图像周围的空白。图像的原始大小是1200x800，但我只想在页面上的某个点显示该图像的一小部分。但在背景中，它仍然需要整个图像的大小来创建标题、图像和内容之间的所有空间。这是我的 CSS HTML 标题在这里与流行的观点相反，Lorem Ipsum不是简单的随机文本。。。。。您可以将此代码用于解决方案： #img{ 位置：相对位置；宽度：800px；高度：100px；溢出：隐藏； } img{ 最大宽度：100%；位置：绝对位置；顶部：-220px；左：0；

我无法删除此剪辑图像周围的空白。图像的原始大小是1200x800，但我只想在页面上的某个点显示该图像的一小部分。但在背景中，它仍然需要整个图像的大小来创建标题、图像和内容之间的所有空间。这是我的

CSS

HTML


标题在这里
与流行的观点相反，Lorem Ipsum不是简单的随机文本。。。。。

您可以将此代码用于解决方案：

#img{
位置：相对位置；
宽度：800px；
高度：100px；
溢出：隐藏；
}
img{
最大宽度：100%；
位置：绝对位置；
顶部：-220px；
左：0；
}

这根本不是剪辑路径的工作方式。它决定显示图像的哪个部分，但不会更改图像尺寸。路径之外的部分实际上并没有“切断”页面中的图像元素。我认为这是不可能的。您的图像占用了div空间，您正在显示图像的一部分。啊。。那么我现在需要拍摄两张不同的图像吗？或者是否有其他方法可以从同一张图像中获得此功能。我需要的是在同一页面上剪切部分和整个图像。正如@CBroe所说，

clip path

并不是为了实现这一点，而且仍然没有很好的浏览器支持。您最好将您的

img

放在一个新的相对定位的

div

中，该div具有您想要显示的维度和

溢出：隐藏的。然后将您的img
完全定位在内部，并使用left
和top属性将图像位置偏移到您想要的位置。
img {
    max-width: 100%;
    clip-path: inset(248px 0 238px 0);
}

  <body>
    <h1>Header Here</h1>
    <img src="http://via.placeholder.com/1200x800" alt="image" />
    <div>
      Contrary to popular belief, Lorem Ipsum is not simply random text.....
    </div>
  </body>