title: Why is the ratio between height and width maintained in the <img> element?
body: <p>If i just write a simple code like this:</p>
  <pre><code>&lt;img src=&quot;mycat.jpg&quot; height=&quot;300px&quot;;&gt;
  </code></pre>
  <p>Now, if the image is very large, the height will get reduced to <code>300px</code>, 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 &quot;auto&quot; 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?</p>
  <p>Yes, i know that, if i set the <code>width</code> to <code>100%</code>, 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?</p>
  <p>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 <code>display:flex</code> 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?</p>