title: CSS: Maintain aspect ratio in responsive img with max-width and max-height
body: <p><sub>(Similar questions are already asked at stackoverflow, but this question has more constraints, such as both a specific max-width, max-height, a required specific height and width, and no layout shift.)</sub></p>
  <h1>Problem:</h1>
  <p>I want to have a responsive image with the following constraints:</p>
  <ul>
  <li>max-width: 100%, so that it doesn't overflow to the right, and that it is responsive when reducing the screen width.</li>
  <li>max-height: 200px, so that large images are reduced in rendered dimensions.</li>
  <li>height and width html attributes set, so that the browser can precalculate the required image dimensions, so that the layout doesn't shift/move elements beside/below the image, while the image is loading. (To reduce the <a href="https://web.dev/optimize-cls/" rel="nofollow noreferrer">cumulative layout shift</a>.)</li>
  <li>image aspect ratio should stay 1:1</li>
  <li>no extra margins should be created around the image</li>
  <li>the image should be rendered with a plain html img tag, not with css background-images</li>
  <li>the image should not be rendered in a larger dimension than its original dimension</li>
  </ul>
  <p>How can I achieve this with CSS?</p>
  <p>(If CSS cannot achieve this, then maybe in JavaScript?)</p>
  <h1>What I tried</h1>
  <p>I tried several CSS features, such as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit" rel="nofollow noreferrer">object-fit</a> and max-width: 100% etc, but I always get at least one of the contraints failing while trying to fix another constraint. For example, object-fit creates margins/paddings for the image when it's reduced in size when the screen size reduces, as if the image border isn't reduced. This is demonstrated in the following code:</p>
  <p><a href="https://codepen.io/Devabc/pen/mdVvyKq" rel="nofollow noreferrer">https://codepen.io/Devabc/pen/mdVvyKq</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Should appear to the right of the Wombat */
  
  .beside {
    float: left;
    background-color: lightgreen;
    border: 1px solid;
    height: 200px;
    width: 100px;
  }
  
  
  /* Should appear below the Wombat */
  
  .below {
    background-color: red;
    border: 1px solid;
    width: 100px;
    height: 300px;
    clear: both;
  }
  
  img {
    display: block;
    float: left;
    max-width: 100%;
    max-height: 200px;
    border: 1px solid;
    
    /* Without this, aspect ratio is not normal. 
  But with this, it creates an unwanted margin. */
    object-fit: scale-down;
    object-position: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img 
  height="533" 
  width="799" 
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg" 
  /&gt;
  
  &lt;div class="beside"&gt;This text should be directly to the right of the Wombat, without any margin between the Wombat and this text.&lt;/div&gt;
  
  &lt;div class="below"&gt;This text should be directly below the Wombat, without any margin between this and the Wombat. 
  The dimensions of the original Wombat img are:
  width: 799px, height: 533px&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(The green text should be to the right of the Wombat, without margin. But object-fit causes a padding/margin to appear with the length of the original image.)</p>
  <p>It's feels almost as if this isn't possible with CSS, even though these requirements shouldn't be too much to ask nowadays, with responsive design being important.</p>
  <p>How can I fix this with HTML/CSS?</p>