CODEWITHSUNDEEP
javascriptphpcssimagecrop
Anna Fr.
Anna Fr.

Reputation: 75

Crop a picture with Javascript or CSS?

I have pictures of constant width (i.e. 100px) but with variable height (could be 200px, 130px, ... but height is always >= 100px).

I'm looking for CSS or JavaScript code that can crop the bottom of the picture so that all my pictures will be of size 100x100.

Can this be done, or should I use some PHP (or other server side language) library?

Upvotes: 2

Views: 633

Answers (6)

65Fbef05
65Fbef05

Reputation: 4522

If you only need the image visually cropped, you could set it as the background image of another element by the desired dimensions.

/* CSS */
.imageContainer {
    display: block;
    width: 100px;
    height: 100px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

<!-- HTML -->
<div class="imageContainer" style="background-image: url('path/to/your-image.jpg')"></div>

Upvotes: 1

yoozer8
yoozer8

Reputation: 7489

Using the images width/height attributes would scale it, which you don't want. One possibility would be to put each image in a 100x100 div, hiding the overflow. The only problem here is if you have any alt text on the image, it will be cut off.

<div style="width:100px;height:100px;overflow:hidden;>
    <img src="image.jpg">
</div>

Upvotes: 0

Michael Wolfendale
Michael Wolfendale

Reputation: 86

You could set the image to be the background of a div which was 100px square. That'd work. Especially if you didn't mind that it just cut the bottom off each time. You could offset the background if you wanted to change where it cut off.

Upvotes: 0

joostschouten
joostschouten

Reputation: 3893

Try the follwoing:

<div class="cropContainer">
    <img src="yourImageSrc">
</div>

<style>
    .cropContainer{
        overflow:hidden;
        width:100px;
        height:100px;
        display:block;
    }
</style>

Upvotes: 0

KARASZI Istv&#225;n
KARASZI Istv&#225;n

Reputation: 31467

HTML:

<div id="cutter">
  <img src="..." alt=""/>
</div>

CSS:

div#cutter {
  overflow: hidden;
  width: 100px;
  height: 100px;
}

Upvotes: 7

slaphappy
slaphappy

Reputation: 6999

Yes, this can be done using CSS. For example :

<div style="background-image:url('stuff.png');width:100px;height:130px;"></div>

Upvotes: 2

Related Questions