0

假设原始图片的高度为 500 像素，宽度为 400 像素。我想在网站上显示这张图片，这样在高度上只有 480 像素可见。这可能使用css吗？非常感谢提前

4

3 回答 3

1

如果不知道图片的高度，又需要裁剪图片，那么可以使用负边距和overflow: hidden（左边是原样，右边是裁剪过的）：

HTML

<div class="crop">
    <span><img src="http://images.gizmag.com/hero/windows8leak.jpg" /></span>
    <strong><img src="http://images.gizmag.com/hero/windows8leak.jpg" /></strong>
</div>​

CSS

.crop {overflow: hidden;}
.crop strong {display: inline-block; overflow: hidden; margin-bottom: -50px;}
.crop strong img {display: block; margin-bottom: -20px;}​

演示

使用 CSS 裁剪图像

查看演示：http: //jsfiddle.net/xULaP/

于 2012-07-06T03:32:01.157 回答
0

要裁剪，您可以尝试使用外部<div>withoverflow: hidden和结果设置的宽度和高度，将图像放在其中，然后使用边距进行裁剪。边距值将是原始高度和裁剪高度之差，因此在您的情况下为 20px。

http://jsfiddle.net/DjyzK/1/

我为 DIV 添加了一个边框，以便您可以看到它的位置。

绝对定位很简单，因此您可以在它不紧贴页面边缘时看到它。

如果您不知道图像的高度/宽度，请尝试 Praveen 解决方案的这个分支：http: //jsfiddle.net/xULaP/1/

希望这可以帮助！

于 2012-07-06T03:27:33.237 回答
0

是的：将图像设置为元素的背景，并指定该元素的宽度和高度。JSFiddle 示例

于 2012-07-06T03:20:33.720 回答