Question

我无法删除此裁剪图像周围的空白区域。图像的原始大小为1200x800，但我想在页面上的某个点仅显示该图像的一小部分。但在后台仍然需要整个图像的大小创建标题，图像和内容之间的所有空间。这是我的Plunker code

CSS

img {
    max-width: 100%;
    clip-path: inset(248px 0 238px 0);
}

HTML

  <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>

Answer 1

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

CSS： -

#img {
  position: relative;
  width: 800px;
  height: 100px;
  overflow: hidden;
}
img {
    max-width: 100%;
    position: absolute;
    top: -220px;
   left: 0;
}

HTML： -

<div id="img">
    <img src="http://via.placeholder.com/1200x800" alt="image" />
</div>

使用clip-path

1 个答案: