裁剪HTML5 CSS或C#中的图像.NET

本文关键字：图像 NET HTML5 CSS 裁剪 | 更新日期: 2023-09-27 17:58:33

我想选择图像上的区域，然后将其裁剪成多个部分，并使用HTMl-CSS等将这些多个图像分别保存在文件夹中请指导我如何选择图像区域并将其划分为多个图像，如10行3列，这样将有30个裁剪的图像，并将分别保存在文件夹中，如果基于web的应用程序，我想使用HTMl CSS来实现这一点如果没有，我可以使用C#。NET用于此任务的独立应用程序

裁剪HTML5 CSS或C#中的图像.NET

如果使用css，我会认为您的任务具有负边距。

首先，将图像放置在父元素中，例如在段落（标记<p>）中。父段落应该是浮动（浮动）元素（或预先确定的宽度）。我注意到，在具有"全宽"属性的元素上不起作用。

接下来，我们为所有四个边设置负边距：上、右、下和左。负边距决定了在各个方向上的剪切方式，我们的图像位于父部分（第<p>段）。我们只得到原始图像的一部分——一块碎片。然后，当我们将父属性溢出替换为隐藏属性时，我们会隐藏超出修剪范围的字段。实现了目标。然而，您将不得不修改精确指定所需尺寸的值。

<p class="crop"><a href="#"><img src="img.jpg" /></a></p>



.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
}
/* input values to crop the image: top, right, bottom, left */
.crop img {
    margin: -41px -156px -40px -30px;
}

为什么不使用JQuery Cropper？

https://fengyuanchen.github.io/cropper/

相关文章：