Change image height without stretching the image

Question

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

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

Possible duplicate of [CSS force image resize and keep aspect ratio](https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio) — Peter B, Apr 24 '18 at 11:15

score 4 · Answer 1 · edited Apr 24 '18 at 11:41

4

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.

edited Apr 24 '18 at 11:41

Sarvan Kumar

answered Apr 24 '18 at 11:14

Rakowu

I need the image to have a full width, but the height to be smaller, like 60 of the view port. – Light_Warrior Apr 24 '18 at 11:16
1

Try using background-image and use background-size: contain or cover. Otherwise use a container wrapping your image with an height of 60vh and overflow hidden. But you should use a horizontal taken imageinstead of an vertical taken. It makes it easer for you :) Here is an other example. http://jsfiddle.net/Rakowu/QEpJH/880/ – Rakowu Apr 24 '18 at 11:17
*EDIT: Here is an other example. http://jsfiddle.net/Rakowu/QEpJH/881/ – Rakowu Apr 24 '18 at 11:25

Laurent Mouchart · Answer 2 · 2018-04-25T10:50:29.357

2

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

edited Apr 25 '18 at 10:50

answered Apr 24 '18 at 11:17

Laurent Mouchart

score 0 · Answer 3 · edited Apr 24 '18 at 11:40

0

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

edited Apr 24 '18 at 11:40

Sarvan Kumar

answered Apr 24 '18 at 11:17

ruchika jain

score 0 · Answer 4 · answered Apr 24 '18 at 11:22

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

4 Answers4