当前位置：文江博客话题详情

从中心即时裁剪图像 - Javascript？

发布于 2024-10-12 16:26:33 字数 189 浏览 4 评论 0原文

我有一堆图像，它们的宽度和高度各不相同。

有些是正方形，有些是矩形，但我希望它们全部都是我选择的宽度和高度。

我知道我可以在中使用 width="" 和 height=""

那么，我正在寻找的是一个可能的 javascript 解决方案，也许使用 jQuery，它将即时从中心裁剪图像？

这可能吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贵在坚持 2024-10-19 16:26:33

您可以使用 CSS 将图像放置在容器内。然后确保该容器上设置了溢出：隐藏。

例如：

<style>
.container     { position: relative; overflow: hidden; }
.container img { position: absolute; }
</style>

<div class="container">
    <img src="..."/>
</div>

<script type="text/javascript">
$image = $('.container img');
width = $image.width();
height = $image.height();

$image.css({
    left: 0 - (width / 2),
    top: 0 - (height / 2)
});
</script>

You can position the images within a container using CSS. Then ensure overflow: hidden is set on that container.

For example:

<style>
.container     { position: relative; overflow: hidden; }
.container img { position: absolute; }
</style>

<div class="container">
    <img src="..."/>
</div>

<script type="text/javascript">
$image = $('.container img');
width = $image.width();
height = $image.height();

$image.css({
    left: 0 - (width / 2),
    top: 0 - (height / 2)
});
</script>

回复收藏 0 原文

徒留西风 2024-10-19 16:26:33

<div style="width:200px;height:200px;overflow:hidden;position:relative;">
    <img src="example.png" style="width:200px;height:200px;position:absolute;left:-10px;top:-10px;" />
</div>

类似这样的事情！通过设置其位置的左/上属性，您可以模拟裁剪。上面的示例将从图像的顶部和左侧减去 10px。此示例假设图像为 200 像素 x 200 像素，显然需要编辑图像的值。

您可能需要重新定位容器 div，以便图像看起来保留在同一位置。

<div style="width:200px;height:200px;overflow:hidden;position:relative;">
    <img src="example.png" style="width:200px;height:200px;position:absolute;left:-10px;top:-10px;" />
</div>

Something like that! By setting the left/top properties of it's position you can simulate a crop. The above example will take 10px off the top and left of the image. This example assumes the image is 200px by 200px, obviously edit values for your image.

You may need to reposition the container div so that the image looks like it remains in the same place.

回复收藏 0 原文

~没有更多了~