0

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

这：我的 JSFiddle 示例。

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

.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

4

5 回答 5

5

如果您只是使用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%;
}

演示

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

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

这是一个演示——单击图像进行裁剪。

演示

于 2013-08-30T18:19:23.677 回答
3

设置max-width: 100%;为 img

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

于 2013-08-30T18:10:23.233 回答
2

上的负边距a.darken：

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

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

于 2013-08-30T18:11:49.793 回答
1

使用 CSS 精灵。

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

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

于 2013-08-30T18:34:54.823 回答
0

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

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

于 2013-08-30T18:12:29.800 回答