logo标签列表

在CSS中裁剪图像

htmlcssimagecrop
13

我创建了一个由图片组成的双列网格，在所有横向图片上都运作良好：链接。然而，我添加了一张竖向的图片，导致布局错乱，因此我想能够“裁剪”该图片，使其高度与其他图片相匹配。我尝试使用负边距，但没有效果：

.portrait-crop
{
    overflow: hidden;
}

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

我不确定我做错了什么，希望能得到帮助。

这是我的代码（参考链接）。

你的选择器有问题。请使用.protrait-crop img代替。 - rnrneverdies
10个回答
15
您可以像这样裁剪图像：

CSS：

.crop-container {
    width: 200px;
    height: 300px;
    overflow: hidden;
}
.crop-container img {
    margin-top: -100px;
    margin-left: -200px;
}

调整容器的height和width以调整裁剪图像的尺寸，并调整图像元素本身的负margin-top和margin-left的数量来选择要裁剪的图像部分。

HTML:

<div class="crop-container">
    <img src="some-img"/>
</div>

工作的Fiddle

enter image description here

针对固定高度行的2列网格的替代解决方案：

CSS：

body {
    margin: 0;
}
div.img {
    float: left;
    width: 49%;
    margin: 0.5%;
    height: 100%;
    background-size: cover!important;
    background-repeat: no-repeat!important;
}
div.row {
    height: 300px;
}

HTML：

<div class='row'>
    <div class='img' style='background: url("some-image");'>&nbsp;</div>
    <div class='img' style='background: url("some-other-image");'>&nbsp;</div>
</div>
<div class='row'>
    <div class='img' style='background: url("foo-image");'>&nbsp;</div>
    <div class='img' style='background: url("bar-image");'>&nbsp;</div>
</div>

工作的Fiddle

我尝试了这个，结果非常奇怪；图像被调整大小并居中在其他图像使用的空间中。不确定为什么。 - Mario Parra
你仍然需要指定缩小原始图像的尺寸。如果您想要图像的网格类型布局，还需要为.crop-container元素提供CSS：display: inline-block;。 - nettux
我不是很明白，但还是谢谢。我得继续试着操作一下。 - Mario Parra
11

如果不为容器设置高度，它就不知道应该显示多少内容。

你可以尝试像这样做：

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

.portrait-crop img{
    width: 100%;
}
1
不太确定为什么，但这会将图像垂直缩小以适应，但然后变得太窄而无法裁剪。 - Mario Parra
width: 100% 是将 img 缩放到 .portrait-crop（其父元素）的宽度。 - nettux
4

您可以使用4个CSS属性从顶部、底部、左侧和右侧裁剪：

  • object-fit
  • object-position
  • width
  • height

#crop-bottom {
  height: 100px;
  width: 350px;
  object-fit: cover;
  object-position: top;
}

#crop-top {
  height: 100px;
  width: 350px;
  object-fit: cover;
  object-position: bottom;
}
#crop-left {
  height: 150px;
  width: 250px;
  object-fit: cover;
  object-position: right;
}
#crop-right {
  height: 150px;
  width: 250px;
  object-fit: cover;
  object-position: left;
}
<img id="no-crop" src="https://satyr.dev/350x150">
no-crop
<br />
<img id="crop-bottom" src="https://satyr.dev/350x150">
crop the bottom of the image
<br />
<img id="crop-top" src="https://satyr.dev/350x150">
crop the top of the image
<br />
<img id="crop-left" src="https://satyr.dev/350x150">
crop the left of the image
<br />
<img id="crop-right" src="https://satyr.dev/350x150">
crop the right of the image

对于现代浏览器来说，这是最简单的解决办法，但看起来片段中的图像出现了某些问题，无法显示。 - Garrett Albright
谢谢 @GarrettAlbright，SO因为某些原因屏蔽了placeholder.com ¯\(ツ)/¯ - Félix Paradis
3
您可以使用CSS3在单个div中处理此问题，而无需任何额外的容器： 

.portrait-crop {
    width: 300px;
    height: 100px;
    background-size: cover;
    background-position: center;
}
<div class="portrait-crop" style="background: url(https://www.google.ca/images/srpr/logo11w.png);"></div>

问题在于我的图片源需要与 href 匹配以触发网站的灯箱。 - Mario Parra
1
是的，我注意到了。看起来该网站并没有使用最新的技术，所以触发器被包装在<a>和<img>标签中。我注意到你正在使用jQuery，因此也许可以在页面加载后使用一些巧妙的方法来应用这种技术。我没有足够的时间来处理布局。您还可以尝试将灯箱相册应用于div，通常可以使用rel="foo"，然后href="somephoto"，它会将href作为图像src获取，同时仍然能够应用style=""来设置背景。 - Kraang Prime
负边距的问题在于它们已经过时，并且在不同的浏览器中存在差异，而CSS背景在这一点上几乎已经完全实现并保持一致。我最近在我目前正在进行的项目中遇到了类似的问题，这就是为什么CSS解决方案在我的脑海中仍然很新鲜的原因 :) - Kraang Prime
对我来说完美运作。 - Jim Dandy BOA
1

我不确定自己哪里做错了。非常感谢您的帮助。

您的问题在于 CSS 选择器。

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

匹配带有肖像裁剪类的图像。

但是这个

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

匹配位于人像裁剪容器内的图像。

1

在CSS中裁剪图像

.crop{      
    clip-path: inset(40px 0 0 0); //for left side                                            
    clip-path: inset(0 40px 0 0); // for top side                              
    clip-path: inset(0 0 40px 0); // for right side                            
    clip-path: inset(0 0 0 40px); // for bottom side                 
}
0
在他的实际网站上，为了使其在最宽的布局下正常工作，需要将其设置为 .portrait-crop { height: 431px; }。但是，如果不对布局进行重大更改，则会出现宽度和高度比例问题。 - CJdriver
1
这样做不会修剪任何东西，只会压缩/拉伸图像，而实际上比原始问题看起来更糟糕。 - Novocaine
0
使用只有CSS而不影响您的HTML代码的一种可能解决方案是这样的：
/* Fix for portrait */
.portrait-crop {
     width:50%;
     overflow:hidden;
     height:179px;
     display:inline-block;
 }
 .portrait-crop img {
       width:100%;
       height:auto;
 }

或者，添加一些 div（更好的解决方案）：http://jsfiddle.net/yoyb9jn7/

0

试试这个。将img标签放在一个带有固定宽度和高度的溢出div中，并根据其方向应用宽度或高度。 试一下这个

.overflow{
  overflow: hidden;
  width: 400px;
  height: 271px;   
 }

.overflow img{
   overflow: hidden;
   width: 400px;
}

http://jsfiddle.net/91z2wxfy/9/

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接