Question

I want a <img> 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 <div>‘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.

Answer 1

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*/
}

<div class="container">
   <img src="https://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" />
</div>

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;
}

<div class="container">
   <img src="https://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>

Hope this helps…