在CSS中裁剪图像 [英] Crop image in CSS

问题描述

我创建了一个两列图像网格，可以很好地处理所有风景图像：链接。但是，我添加了一幅抛出布局的肖像图像，所以我希望能够裁剪图像，以便高度与其他图像匹配。 我尝试使用负边距，但它不起作用：

I've created a two-column grid of images, which works fine with all-landscape images: Link. However, I've added a portrait image that throws off the layout, so I'd like to be able to "crop" the image so that the height matches the others'. I tried using a negative margin, but it had no effect:

.portrait-crop
{
    overflow: hidden;
}

img.portrait-crop
{
    margin-bottom: -30px;
}

我不确定我做错了什么。任何帮助，将不胜感激。

I'm not sure what I'm doing wrong. Any help would be appreciated.

作为参考，这是我的代码。

推荐答案

你也需要在容器中放一些高度，如果不是，它不知道如何它应该显示它在里面。

You need to put some height to the container also, if not, it doesn't know how much it should show of what it is inside.

你可以尝试这样的事情。

You can try something like this.

.portrait-crop{
    display: inline-block;
    height: 215px;
    width: 50%;
    overflow: hidden;
}



.portrait-crop img{
    width: 100%;
}

这篇关于在CSS中裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！