13

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.
1
  • May be you can use javascript to get the container / browser width and height, then calculate the actual px instead of using %.
    – Tommy
    Jan 13, 2012 at 6:32

5 Answers 5

22

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...

1
  • Errrrrr... I mean, the image is not originally cropped(I would manually edit the image file if I want to crop), the "crop" effect only happens when the outer container becomes narrower.
    – tslmy
    Jan 13, 2012 at 10:51
7

Add this class to the img html tag, it will keep the image as it is, but will take the necessary specified space ie.40% x 40% without stretching the image

.img{
    width:40%;
    height:40%; //change to whatever your choice

/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/
    object-fit:scale-down;
}
3

Here's a few options. (see the demo of all these options here: http://jsfiddle.net/Squeegy/Gcrdu/ )

The first as a plain image of unknown size. This displays at whatever size it happens to be.

<img src="http://www.google.com/logos/classicplus.png">

But as it turns out, you can preserve the aspect ratio of an image if you only set the width, or only the height. The other dimension will adjust itself to keep things from stretching.

// HTML
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink">

// CSS
img.aspectshrink {
    width: 100px;
}

But when you use CSS background images you can do some creative cropping based on where anchor the background.

This says "Go"

// HTML
<div class="cropped-right"></div>

// CSS
.cropped-right {
    width: 100px;
    height: 100px;
    background: url(http://www.google.com/logos/classicplus.png);
    background-position: left center;
    background-repeat: no-repeat;
    border: 1px solid red;
}

And this says "gle":

// HTML
<div class="cropped-left"></div>

// CSS
.cropped-left {
    width: 100px;
    height: 100px;
    background: url(http://www.google.com/logos/classicplus.png);
    background-position: right center;
    background-repeat: no-repeat;
    border: 1px solid red;
};
1
  • Nice touch, buddy. Though it's not my final answer, I would appreciate your answer as a way to crop a image in the future! Thanks.
    – tslmy
    Jan 13, 2012 at 10:53
0

Try to use ImageResizer. Here's the link : http://imageresizing.net/

-1

Do you mean cropping the image? If so look into CSS overflow property. Also you could put it into the background and centre it in the div

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.