0

How do I mantain original image ratio?

If I have a "img" element and I do "style="width: 25px; height: auto;"" the image doesn't have automatic height, it is modified. How do I get auto height?

user11638558
  • 1
  • 2
  • 1
    Possible duplicate of [this](https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio) – Calvin Godfrey Jul 12 '19 at 18:48
  • Do you mean you want to maintain the height? Regardless of the width? Your question is unclear as it stands. – StudioTime Jul 12 '19 at 18:49
  • an image will by default keep its ratio is specify either the height or the width and not both at the same time – Temani Afif Jul 12 '19 at 19:23
  • Possible duplicate of [CSS force image resize and keep aspect ratio](https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio) – xmaster Jul 12 '19 at 19:46

2 Answers2

0

The width and height properties of img tags do this by default.

<img width="100" src="https://images.unsplash.com/photo-1562939230-e05e7c80c1d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=652&q=80" />
<hr />
<img width="25" src="https://images.unsplash.com/photo-1562939230-e05e7c80c1d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=652&q=80" />
Bitwise Creative
  • 4,035
  • 5
  • 27
  • 35
0

You can use the code given below.

#one {
  width: 25%;
  height: auto:
}

#two {
  width: 20%;
  height: auto:
}
<img id="one" src="https://picsum.photos/id/237/120/180" />

<img id="two" src="https://picsum.photos/id/237/120/180" />
Showrin Barua
  • 1,737
  • 1
  • 11
  • 22