如何在CSS中裁剪图片？

Question

好的，这里是问题，我的应用程序允许用户插入任何图像。他们可以插入非常大或非常长的图像。但是当我渲染图像时，我希望 width="50px" 和 height="100px"。

如果我这样做：

.myImage{
   width:50px;
   height:100px;
}

如果比例不准确，图像可能会变形。所以，这是我的想法。首先，我希望图像具有width:50px，然后如果height>100px，则CSS将从底部裁剪掉。好的，让我们看一个例子，用户插入了一个宽度为150px，高度为600px的大图像。因此，如果我将宽度减小到50px，则高度将为200px。我想裁剪图像底部，所以它只显示(w: 50px, h: 100px)，请看图片：

那么如何做到呢？

- Tum

---

在上传过程中裁剪图像会更好 - 如果您通过CSS缩放/裁剪大型图像，您的加载速度将受到影响。但是，如果您不关心这一点，您可以将图像包装在所需大小的div中，并设置overflow: hidden，或将其设置为背景图像并更改背景位置。 - Novocaine

可能是使用CSS等比例调整图像大小的重复问题？ - ExCluSiv3

使用background-image CSS属性代替img标签。（当然，如果img不是设计的一部分，而且你不需要语义化的话 :)) - Kinga

我认为你需要生成缩略图。你使用的是什么技术？ - Ragnar

我将maxsize设置为1 MB，因此如果图像非常大，则会变得非常模糊。 - Tum

Answer 1

1）使用<div>和overflow:hidden来剪裁图像：

 div.trim {
     max-height:100px;
     max-width: 50px;
     overflow: hidden;
 }

 <div class="trim"><img src="veryBigImage.png"/></div>

2）使用max-width: 50px;和max-height: 100px来限制图片大小。这样图片就可以保留自己的尺寸。

- Justinas

Answer 2

我建议使用CSS CLIP属性将其裁剪到所需大小。

img {
position: absolute;
clip: rect(0px,50px,100px,0px);
width:50px;
}

如果图像足够小，就不会被裁剪。否则，您需要将其裁剪。

- starvator

---

clip现已被弃用，建议使用clip-path。 - Algorythmis

Answer 3

你可以使用 div 包含 img 并添加 overflow: hidden; 样式。

HTML代码：

<div class="img-wrapper">
    <img src="path/to/image.jpg" />
</div>

CSS：

.img-wrapper{
    max-height: 100px;
    overflow: hidden;
}

.img-wrapper img{
    width: 50px;
}

- Jmh2013

Answer 4

通过使用max-width和max-height，您可以将高度设置为任何您想要的大小，并且完整的图像将显示。

.myImage{
    height:auto;
    width:auto;
    max-width:300px;
    max-height:300px;
}

- ExCluSiv3

Answer 5

你需要将图片放在一个指定裁剪尺寸的容器中，并使用 overflow:hidden。

HTML:

<div id="container"><img src="myimage.jpg"/></div>

css：

#container {width:50px;height:100px;overflow:hidden}
#container img {width:50px;}

- MeLight