When I write a simple code like this:
<img src="mycat.jpg" height="300px";>
I noticed that if the image is very large, the height will be reduced to 300px, and the width will automatically adjust to fit the new height. I expected the width to remain at "auto," meaning it should adjust to the content width, which in this case would be the original image size. Why does the width change when I only adjust the height? Could it be because the aspect ratio is fixed?
Although setting the width to 100% would make the image fill the entire width of the element block, I'm curious as to why setting it to "auto" adjusts to the element's height rather than staying at the original image size, especially when the element's width remains unchanged.
Is there a way to change the image size itself without altering the size of the containing element? For example, can I target just the image and adjust its size without affecting the surrounding element using CSS, such as with display:flex to modify the spacing between the element and the image?