Regarding Height in CSS

Question

So I have an image, and i have in CSS what follows below

Img{
Width:100%;
Height:100px;
}

Now i would like to change the height to a percentage so when it's viewed on a smaller screen it still looks good but everytime i do so, even just 5% it takes up the whole screen, whats up with this, and is there a workaround?
https://code.sololearn.com/WVuPm3F5Hu92/?ref=app

Answer 1

https://code.sololearn.com/WtCxdVu4R82u/?ref=app

Answer 2

.

Answer 3

To make an image display in its proper respect ratio.
You should set img with the width in % and height in auto.

Eg.

img {
width: 100%; /* or other value */
height: auto }

If the height set to 100%, the image would be distorted likely.

Answer 4

You can use media queries and specifying the height of the image

Answer 5

Can you please provide the code? We can't find out anything about this situation with just a description

Answer 6

I added my code now so you guys can see

Answer 7

Try making it a background-image css property, you can have more control with scaling than with regular images.