Question

我有一个项目列表，我需要“裁剪”（我意识到使用纯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内。

我能得到的任何帮助都很棒，我对编程很新，但我很享受它的每一步。

再次感谢！
专利

编辑：发现答案在剪辑属性中。谢谢BrbCoding

Answer 1

如果您只使用background-image进行背景定位会怎样？

HTML

<div id="crop"></div>

CSS

#crop {
    position: relative;
    width: 150px;
    height: 150px;
    display: block;
    background-image: url(http://placekitten.com/300/300);
    background-position: 50% 50%;
}

<强> DEMO

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

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

这是一个演示 - 点击图片进行裁剪。

<强> DEMO

Answer 2

将max-width: 100%;设置为img

http://jsfiddle.net/V4YEx/3/

Answer 3

a.darken上的负边距：

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

http://jsfiddle.net/V4YEx/7/

Answer 4

使用css sprites。

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

http://jsfiddle.net/V4YEx/6/

Answer 5

如果您向.cocktailThumb添加position: relative，然后将position: absolute添加到图像，则可以在容器内随意移动它。例如，如果你想要一直到右边，你可以在图像上做right: 0。从这里，您可以将正确的属性更改为您需要的任何内容。

小提琴：http://jsfiddle.net/V4YEx/1/

使用CSS“裁剪”照片

5 个答案: