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

Question

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

有些是方形的,有些是矩形的,但我希望它们都是我选择的宽度和高度.

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

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

这可能吗？

Answer 1

您可以使用CSS将图像放置在容器中.然后确保在该容器上设置overflow:hidden.

例如:

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