CODEWITHSUNDEEP
htmlcss
tslmy
tslmy

Reputation: 668

How can I resize an image without stretching?

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_____

Upvotes: 14

Views: 44390

Answers (5)

Manoj Selvin
Manoj Selvin

Reputation: 2383

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

Upvotes: 7

sixtillnine
sixtillnine

Reputation: 246

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.sstatic.net/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.sstatic.net/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>

Hope this helps...

Upvotes: 23

JudasPriest
JudasPriest

Reputation: 85

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

Upvotes: 0

Alex Wayne
Alex Wayne

Reputation: 187034

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

Upvotes: 3

Ed Heal
Ed Heal

Reputation: 59997

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

Upvotes: -1

Related Questions