CODEWITHSUNDEEP
css
Light_Warrior
Light_Warrior

Reputation: 183

Change image height without stretching the image

The image is stretched when I try to make the size smaller.

http://jsfiddle.net/QEpJH/878/

.container img {
    display: block;
    width: 100%;
    height: 60vh;
    /*object-fit: cover; // doesn't work in Internet Explorer */
}

Upvotes: 0

Views: 490

Answers (4)

Laurent Mouchart
Laurent Mouchart

Reputation: 216

If you set the width to auto, the image will adjust itself to the given height without any stretch. 

.container img {
        display: block;
        width: auto;
        height: 60vh;
    }

Upvotes: 2

Rakowu
Rakowu

Reputation: 154

You need to make it scalable by 1:1

so use
width: auto; instead of width:100;.

or use height: auto; and width: 100%; in case you want to cover the whole width.

But remember if you cover the whole width, the height will increase.

Upvotes: 4

ruchika jain
ruchika jain

Reputation: 160

Try ratio in only percentage or use similar ratio

.container img {
   display: block;
   width: 30%;
   height: 30%;
   /*object-fit: cover; // doesn't work in Internet Explorer */
}

Upvotes: 0

S Morris
S Morris

Reputation: 25

if you set the image as a background instead and use

background-size:cover

you will lose the stretching but some of the image may get cut off

to counter this slightly you can use 

background-position

to position the image in a more desirable place

Upvotes: 0

Related Questions