title: Use flexbox and maintain an aspect ratio even though content is sized differently
body: <p>There are a lot of questions on SO about maintaining the aspect ratio of an element (with flexbox or without). However, my problem is slightly different as I want to override the aspect ratio of a child image element:</p>
  
  <ol>
  <li>Make sure the image covers the element (<code>object-fit: cover</code>) completely</li>
  <li>Make sure the element is 1:1 (i.e. a perfect circle)</li>
  <li>Make sure that the overflowing image is hidden</li>
  </ol>
  
  <p>In other words, the image has to behave as if it was the background of an element (I can't use them as background images though) of which the aspect ratio is always 1:1 <em>and responsive</em>. </p>
  
  <p>In the example below everything works fine except that the <code>&lt;a&gt;</code> elements adapt to their image descendant. But I want them to maintain a 1:1 ratio so I get perfect circles. (The middle one of the first row has to be larger than the rest, though.)</p>
  
  <p>The HTML can't change, but I can use modern CSS properties such as object-fit and flexbox. (As long as recent versions of Chrome/Firefox support it.)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .img-gallery {
    background: #fafafa;
    padding: 24px;
    min-width: 320px;
    width: 90%;
    margin: 0 auto;
  }
  
  .img-gallery .row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
  }
  
  .img-gallery a {
    display: block;
    text-decoration: none;
    background-image: linear-gradient(60deg, #004494 0%, #7db9e8 78%, #c2dfed 100%);
    overflow: hidden;
    border-radius: 50%;
    padding: 3px;
    flex: 1;
    margin: 0 24px;
    transition: padding 200ms;
  }
  
  .img-gallery a:hover,
  #s_country .img-gallery .row:first-of-type a:nth-child(2):hover {
    padding: 0;
  }
  
  .img-gallery a:hover span {
    transform: scale(1.25);
  }
  
  .img-gallery .row:first-of-type a:not(:nth-child(2)) {
    width: 30%;
    width: calc((60% - 96px) / 2);
  }
  
  .img-gallery .row:first-of-type a:nth-child(2) {
    flex: 2;
    padding: 4px;
  }
  
  .img-gallery span {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 250ms;
    z-index: 2;
  }
  
  .img-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .img-gallery span::before {
    content: "";
    background-image: linear-gradient(60deg, transparent 48%, #ffc5e7 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    opacity: .72;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="img-gallery"&gt;
    &lt;div class="row"&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/b3/9c/54/b39c54776074d07ee0b567826768730a.jpg" id="img-1-3"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d6/df/51/d6df512a2f15f517767b4d82d2d97a4c.jpg" id="img-1-4"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/ec/a9/dd/eca9dd106a04cdbee399870252ef711f.jpg" id="img-1-5"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/7d/01/19/7d0119a2fec989e208f288326c7cad0f.jpg" id="img-1-6"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d8/c3/32/d8c332d09b03673845b2e92a48816233.jpg" id="img-1-7"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/88/3b/dd/883bddab14168f5f0807fec021002d8d.jpg" id="img-1-8"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/8e/4f/bb/8e4fbb89b155d15521b80d1baf9290d1.jpg" id="img-1-9"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>Code illustrating when Terry's code does not work: landscape pictures.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .img-gallery {
    background: #fafafa;
    padding: 24px;
    min-width: 320px;
    width: 90%;
    margin: 0 auto;
  }
  
  .img-gallery .row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
  }
  
  .img-gallery a {
    display: block;
    text-decoration: none;
    background-image: linear-gradient(60deg, #004494 0%, #7db9e8 78%, #c2dfed 100%);
    overflow: hidden;
    border-radius: 50%;
    padding: 3px;
    flex: 1;
    margin: 0 24px;
    transition: padding 200ms;
  }
  
  .img-gallery .row:first-of-type a:not(:nth-child(2)) {
    width: 30%;
    width: calc((60% - 96px) / 2);
  }
  
  .img-gallery .row:first-of-type a:nth-child(2) {
    flex: 2;
    padding: 4px;
  }
  
  .img-gallery span {
    height: 0;
    display: block;
    border-radius: 50%;
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
    transition: transform 250ms;
    z-index: 2;
  }
  
  .img-gallery img {
    width: 100%;
    object-fit: cover;
    transition: transform 250ms;
  }
  
  .img-gallery a:hover img {
    transform: scale(1.25);
  }
  
  .img-gallery span::before {
    content: "";
    background-image: linear-gradient(60deg, transparent 48%, #ffc5e7 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    opacity: .72;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="img-gallery"&gt;
    &lt;div class="row"&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/b3/9c/54/b39c54776074d07ee0b567826768730a.jpg" id="img-1-3"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d6/df/51/d6df512a2f15f517767b4d82d2d97a4c.jpg" id="img-1-4"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/ec/a9/dd/eca9dd106a04cdbee399870252ef711f.jpg" id="img-1-5"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/7d/01/19/7d0119a2fec989e208f288326c7cad0f.jpg" id="img-1-6"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d8/c3/32/d8c332d09b03673845b2e92a48816233.jpg" id="img-1-7"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/13/7c/3d/137c3d3bd9f25aa9d2677136d9336d74.jpg" id="img-1-8"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;a href="#" title="Show large image"&gt;&lt;span&gt;&lt;img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/8e/4f/bb/8e4fbb89b155d15521b80d1baf9290d1.jpg" id="img-1-9"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>