Question

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

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

我知道我可以使用width =“”和height =“”

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

这可能吗？

Answer 1

您可以使用CSS将图像放置在容器中。然后确保溢出：在该容器上设置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>

Answer 2

<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。此示例假设图像为200px×200px，显然是为您的图像编辑值。

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

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

2 个答案: