Question

如何在html中裁剪图片？我在服务器电脑上有一个图像，是否可以在我的网页上只放置裁剪部分而不显式裁剪并创建新图像？

Answer 1

你真的有两种选择。

1）是使用图像修改脚本来重现裁剪的图像，如TimThumb（需要PHP）。这将动态裁剪图像。从您的问题中不清楚您是否根本不想要新图像，或者您是否只是不想手动创建图像。

2）是用HTML / CSS做一些漂亮的事情。基本上，您可以为图像创建容器，隐藏溢出，并在其中定位/调整图像大小。它会是这样的......

HTML：

<div class="crop">
    <img src="image.jpg" alt="">
</div>

CSS：

.crop {
    display: block;
    height: 100px;
    position: relative;
    overflow: hidden;
    width: 100px;
}
.crop img {
    left: -20px; /* alter this to move left or right */
    position: absolute;
    top: -20px; /* alter this to move up or down */
}

在HTML5中裁剪图像

1 个答案: