Html &引用；作物“；使用CSS的照片

我有一个需要“裁剪”的项目列表（我意识到使用纯CSS它不会真正裁剪，只会显示图像的一部分）到目前为止，我有它看起来像

这：

基本上我就快到了，我只需要把图像放在裁剪区域的中心，这样它就基本上显示了中间的顶部

.cocktailThumb img{
border-width:0px;
width:300px;
height:350px;
position:relative;     /Tried adding this
right: 40px;   /Tried adding this
}

.cocktailThumb {
border-width:0px;
width:220px;
height:150px;
padding-left:20px;
overflow:hidden;
}

我添加并试图更改的部分使图像进入中心。但是溢出物仍然从左侧流出，而我需要保持在div内

我能得到的任何帮助都会很棒，我对编程相当陌生，但我很享受其中的每一步

再次感谢
拍

---

编辑：发现答案在剪辑属性中。感谢BRB编码

设置

最大宽度：100%到img

在
a.darken
上的负边距：

margin-left: -50px;
margin-top: -50px;
height: 200px;

如果在.cocktailThumb中添加
位置：相对，然后在图像中添加
位置：绝对，则可以在容器内随意移动。例如，如果您想让它一直向右，您可以在图像上执行
right:0
。从这里，您可以将正确的属性更改为任何需要居中的属性

小提琴：
如果你只是用背景图像来定位背景呢

HTML


编辑：或者，您甚至可以使用
clip
属性

.cropped {
    position: absolute;
    clip: rect(75px, 250px, 250px, 75px);
}

这里有一个演示--单击图像进行裁剪

使用css精灵

background:url(http://www.girlsgetaway.com/wp-content/uploads/2011/07/drinks_300x350.jpg) -50px -15px;
<img src="" />    

background:url(http://www.girlsgetaway.com/wp-content/uploads/2011/07/drinks_300x350.jpg)-50px-15px；

那
crop
css属性呢？我认为他不需要特殊的裁剪，所以也许没有必要使用css
crop
使用css
crop
属性这是缩放，不是裁剪？这是裁剪，从底部裁剪好的，这是裁剪的四分之一，但是如果他想把任何一面都去掉，那也没用最好也在覆盖层上这样做，否则在
：hover
状态下，你会在顶部和底部得到50像素的空白。我不知道有一个滚动状态^^^@Chimoo我忘了提到滚动状态，但是谢谢你的回答：）它帮助我更好地理解了这段视频。我看到你改变了
rect（）
，在你的250px中有一个是25px之前，奇怪的是，它在Firefox中工作。它做了我在Chrome中所期望的（将图像完全裁剪掉）。哈，这很奇怪。。。是的，我改变了尺寸，因为我觉得它看起来有点古怪。这是一个有趣的问题。不确定，我认为它得到了广泛的支持。显示87.12%的支持率，但你永远不知道这有多准确。我已经在Chrome、Chrome Canary、Firefox和IE10中进行了测试——所有这些都能正常工作。感谢您的帮助！当我对clip属性有了更好的理解后，它就工作得很好了。第一种方法我没能做到，因为我没有从CSS中获取图像（尽管我可能仍然能够做到），我尝试使用背景位置，但没有成功。谢谢@brbcoding:）使用背景图像是个好主意。然而，这并不是一个真正的精灵。精灵在一个图像文件中包含多个图形，可以通过显示图像的特定部分独立显示。哦，好的，好的，知道了，所以精灵使用背景，但不一样。谢谢你，先生，我会知道的
.cropped {
    position: absolute;
    clip: rect(75px, 250px, 250px, 75px);
}

background:url(http://www.girlsgetaway.com/wp-content/uploads/2011/07/drinks_300x350.jpg) -50px -15px;
<img src="" />