它可以在css中裁剪元素吗？

Question

它可以做这样的事情吗？

我正在浏览互联网，但我没有找到类似的东西，你能帮我吗？

example of problem

Answer 1

您是否希望对图像进行物理裁剪？如果是这样，CSS 不是解决方案。

如果您想让它在输出到页面时看起来好像被裁剪了，那么这是可能的。

两种方法如下：

A.使用背景图片

HTML

<div class="container"></div>

CSS

.container{
    width:500px;
    height:200px;
    overflow:hidden;
    background-image:url('https://placeimg.com/500/500/animals?t=1519760344548');
    background-repeat:no-repeat;
    background-position:center center;
}

B.使用 img 标签

HTML

<div class="img-container">
    <img src="https://placeimg.com/500/500/animals?t=1519760344548" />
</div>

CSS

.img-container{
    width:500px;
    height:200px;
    overflow:hidden;
    position:relative;
}
.img-container img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
 }

Here's a fiddle for you.