1

If i just write a simple code like this:

<img src="mycat.jpg" height="300px";>

Now, if the image is very large, the height will get reduced to 300px, and automatically the width will get reduced too to fit the height size. Why is that? I thought that, if the width is not specified, it remains on "auto" which means, the width of the element adjusts to the width of the content, in this case, the width of the original image size. When i change the height of the element, the height of the image changes too to fit the element size, but why is the width changes too? It must be because the ratio is fixed. Is that the case?

Yes, i know that, if i set the width to 100%, the image will expand to fill in the entire width of the element block, but why is it that if its set on auto, it adjusts to the height of the element rather than stay with the original size of the image since the width of the element has not been changed?

Also, is there an actual way to change the size of the content, i.e. the image itself rather than changing the size of the element which contains the image? I could use display:flex and change the space between the element and the image, so is there a way to target just the image and not the entire element itself?

Makyen
  • 31,849
  • 12
  • 86
  • 121
  • The css 'auto' behaves differently on some elements. Take a look at this: https://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property – Puk May 27 '20 at 14:24
  • Did not really answer my question. –  May 27 '20 at 14:43

1 Answers1

0

an image is scaled by default when you try to give it height but not the width in order to maintain its looks suppose an image is 2160px of height and 3840px of width and you change it to width to 300px only this will affect the height and make the height to 168px and for more understanding try to resize the image in paint where the initial scale will looks like this

enter image description here and when you resize it to 300px of wide it will also look like this enter image description here

Umutambyi Gad
  • 4,082
  • 3
  • 18
  • 39