裁剪照片

我有一张约240像素x 366像素的照片。我的宽度就是我想要的。我只需要包含垂直中间的100像素，所以基本上我会在整个宽度上垂直显示照片的中间部分。裁剪照片

这是我的代码至今：

var img = '<img title="' + title + '" alt="' + title + '" class="blog-image-ind" src="' + imgSrc + '" width="240" style="float:left;" />'

打开任何图像编辑，裁剪图像，并把它上传到网站，为什么你想用css来裁剪它（可能），但为什么用户应下载更大的图像，而不是裁剪一个？ –

我在页面的不同部分使用完整图像，并试图避免必须上传2张图片。 – user2456259

然后阅读有关css剪辑属性 –

可以包括img在div，设置div到overflow: hidden和height: 100px，以及img到margin-top: -133px

<div id="cropimage"> 
    <img src="whatever" alt="whatever"> 
</div>

CSS ：

#cropimage { overflow: hidden; height: 100px } 
#cropimage img { width: 240px; height: 366px; margin-top: -133px }

（无实际图像）

2014-07-01 23:53:26 jcaron

谢谢。你知道如果图片的高度改变了，我会怎么做？这将是一个百分比的线。 – user2456259

如果你知道它的大小，那么margin-top就是'（（height-100）/ 2）+'px''（你需要在'img'的'style'中做到这一点，而不是一个类）。否则，你可能会使用'margin-top：-50％'，再加上'padding-top：50px'，让我试试看。 – jcaron

回答