jquery - cropping images from center on the fly - Javascript? - Stack Overflow

admin管理员组

文章数量:1340355

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.

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?

Is this possible?

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.

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?

Is this possible?

• javascript
• jquery
• crop

Share Improve this question Follow edited Jul 4, 2013 at 11:53 j0k 22.8k2828 gold badges8181 silver badges9090 bronze badges asked Jan 17, 2011 at 12:06 terrid25terrid25 1,94699 gold badges4747 silver badges9090 bronze badges 1

• you want to save the cropped images or you just want to crop them for viewing? – nunopolonia Commented Jan 17, 2011 at 12:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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>

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

本文标签： jquerycropping images from center on the flyJavascriptStack Overflow