How can I resize an image without stretching?

Spread the love

Question Description

I want a whose width is 40% of the page, and it gets stretched.

How can I resize it without stretching?

For example, if I have a image whose file originally looks like this:

____8888________
____8888________
____8888________

In my webpage, normally, it should looks like:

____8888________
____8888________
____8888________

As soon as I make the browser a little more narrow, the max-width(let’s say 10 characters in this example) would take effect.
When that happens, I would like it to be:

____8888__
____8888__
____8888__

(just like it’s been cut from the right side. Of course from both sides are better),
Rather than:

__888_____
__888_____
__888_____
  • Any trick (putting it into a
    ‘s background) is okay.
  • Width and height are unknown.
  • Thank you all for your previous answers, but, sorry, I think I haven’t put enough emphasis on “After limiting its width to 40% of the page”, which means before width-limiting it should looks normal.

Practice As Follows

The trick is to put the image into a containing block element, eg a DIV. Once inside set the width of the image to 100%, this will instruct the browser to fit the image width flush with the left and right edges of the DIV.

You then control the width of the DIV via CSS, I find keeping the image in a block element makes manipulation much easier when creating fluid layouts.

Example:

img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
}
Beach Scene

If you wan the image to be clipped/cropped in any way, set it to be larger than it’s parent, and set the parent’s overflow css to hidden.

Example:

img.clipped {
    width: 150%; /*Scales image to 150% width of parent container*/
    float: left; /*Floats image to left of container - clipping right hand side*/
    float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
    width: 33%; /*Use this to control width of the parent container, hence the image*/
    overflow: hidden;
}
Beach Scene

Hope this helps…

Tags ,

Not what you're looking for? Browse other questions tagged ,

Leave a Comment