logo标签列表

在HTML5中裁剪图像

htmlimage
3
如何在HTML中裁剪图像？我在服务器上有一张图片，是否可以仅在网页上放置裁剪后的部分，而无需明确地裁剪并创建新的图像？
1个回答
4
你有两个选择。 1) 使用图像修改脚本（如PHP所需的TimThumb）来复制裁剪后的图像。这将动态裁剪图像。通过你的问题不清楚，你是否根本不想要新图片，还是只是不想手动创建一个。 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 */
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接