CODEWITHSUNDEEP
javascriptimageresize
Brainiac
Brainiac

Reputation: 59

Javascript how to resize and clip an image at the same time?

I have an image with the original size: 374x144. It's 3images in one file. So i define a div tag to get just one image:

<div style="background-image:url('http://pics.kapihospital.de/ga_cars.5.jpg');position:absolute;height:48px;width:374;background-position: 0px -96px;"></div>

Now I want to resize the image/div tag. But when i change the height and with attribute I get a changed clip part and not a resized image.

It is possible to clip and risize an image at the same time? The new size should be someting around 179x23

Upvotes: 0

Views: 358

Answers (1)

Bryan Downing
Bryan Downing

Reputation: 15472

You should use an actual image tag to do the resizing and some kind of wrapper to do the clipping (I used a div).

HTML

<div>
    <img src="http://pics.kapihospital.de/ga_cars.5.jpg" width="179" height="69">
</div>​​​​

CSS

DIV {
    width: 179px;
    height: 23px;
    overflow: hidden;
}

IMG {
    position: relative;
    top: -23px;
}

You can use position: relative on the image and shift it around in the div using a negative top property.

Upvotes: 1

Related Questions