从中心即时裁剪图像 - Javascript？ [英] cropping images from center on the fly - Javascript?

问题描述

我有一堆图像，在宽度和高度方面各种尺寸。

I have a bunch of images, that are various sizes, in terms of width and height.

有些是正方形，有些是矩形，但我想要所有这些都是我选择的宽度和高度。

Some are square, some are rectangle, but I'd like all of them to be width and height of my choice.

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

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

I know I can use the width="" and height="" in the

So, what I was looking for, is a possible javascript solution, maybe using jQuery, that will crop the images from center on the fly?

是这可能吗？

推荐答案

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

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

例如：

<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>

这篇关于从中心即时裁剪图像 - Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！