I have an image with height 173px and width 157px .I want to set its height and width to 100 px but when i do so it get streched.I want to use img tag to do this.I have no problem if it is cropped in resizing
4 Answers
Give height:auto when you change it's width. Write like this:
img{
width:100px;
height:auto;
}
Comments
Yes, it's stretched. How do you want to do without stretching ?
The only thing you can do is to recreate an image using a server api and do not use the resize in css.
But, it will strecht because you do not kept the ratio between width and height !
Comments
Yes, it gets stretched when you apply a different multiplication factor in the horizontal direction than in the vertical. You may want to try width:auto or heigth:auto.
Edit: or if you don't have a problem with cropping the image, you can put it in a container element (for instance a div), on which you set overflow:hidden.
<div style="width:100px; height:100px; overflow:hidden">
<img src="your image" alt="" style="width:100px; height:auto" />
</div>
Another edit:
Just realised it's possible to crop it using only CSS on the image (and not needing a parent container), by using the clip property. See W3C page.
However, sadly enough that requires the element to be absolutely positioned, so unless you know exactly where in the window you want to put it, you'll have to put it in a parent container anyway. Oh well.
Comments
I don't believe it can be accomplished with the img-tag, as it will stretch the image according to your provided width/height. It would however be possible to use a div-element instead, and assign the image as a background. That way the image will not be re-sized, the parts of the image not possible of to display within your 100x100 px element will appear "cropped".
.image-element
{
background-image: url('yourimage.png');
width: 100px;
height: 100px;
}
By using the background-position attribute you could also control which parts of the image that gets "cropped".
