There are many questions on SO about maintaining the aspect ratio of an element (with or without flexbox ).

However, my problem is somewhat different, because I want to override the aspect ratio of the child image.

  1. Make sure the image completely covers the element ( object-fit: cover )

  2. Make sure the element is 1: 1 (i.e. Ideal Circle)

  3. Make sure the overflowing image is hidden

In other words, the image should behave as if it were the background of the element (I cannot use them as background images), of which the aspect ratio is always 1: 1 and adaptive.

In the example below, everything works fine, except that the <a> elements adapt images to their descendants. But I want them to support the 1: 1 ratio in order to get perfect circles. (The middle of the first row should be more than the others).

HTML cannot change, but I can use modern CSS properties like object-fit and flexbox . (So ​​far this is supported by the latest versions of Chrome / Firefox)

 *, *::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; } 
 <div class="img-gallery"> <div class="row"> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/b3/9c/54/b39c54776074d07ee0b567826768730a.jpg" id="img-1-3"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d6/df/51/d6df512a2f15f517767b4d82d2d97a4c.jpg" id="img-1-4"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/ec/a9/dd/eca9dd106a04cdbee399870252ef711f.jpg" id="img-1-5"></span></a> </div> <div class="row"> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/7d/01/19/7d0119a2fec989e208f288326c7cad0f.jpg" id="img-1-6"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d8/c3/32/d8c332d09b03673845b2e92a48816233.jpg" id="img-1-7"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/88/3b/dd/883bddab14168f5f0807fec021002d8d.jpg" id="img-1-8"></span></a> </div> <div class="row"> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/8e/4f/bb/8e4fbb89b155d15521b80d1baf9290d1.jpg" id="img-1-9"></span></a> </div> </div>

Code illustrating when Terry's code does not work: landscape pictures .

 *, *::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; } 
 <div class="img-gallery"> <div class="row"> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/b3/9c/54/b39c54776074d07ee0b567826768730a.jpg" id="img-1-3"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d6/df/51/d6df512a2f15f517767b4d82d2d97a4c.jpg" id="img-1-4"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/ec/a9/dd/eca9dd106a04cdbee399870252ef711f.jpg" id="img-1-5"></span></a> </div> <div class="row"> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/7d/01/19/7d0119a2fec989e208f288326c7cad0f.jpg" id="img-1-6"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d8/c3/32/d8c332d09b03673845b2e92a48816233.jpg" id="img-1-7"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/13/7c/3d/137c3d3bd9f25aa9d2677136d9336d74.jpg" id="img-1-8"></span></a> </div> <div class="row"> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/8e/4f/bb/8e4fbb89b155d15521b80d1baf9290d1.jpg" id="img-1-9"></span></a> </div> </div>

1 answer 1

To preserve the aspect ratio of adaptive elements, you can use the padding technique

Please note that you should not use percentages when filling in the bottom/top part for flex children , see here for more information.

You can create a grid of adaptive squares and add a border-radius to make them circles.

For object-fit: cover; images object-fit: cover; the property does exactly what you need: keep the original aspect ratio of the image and completely cover the element.

I changed the first image to a landscape image to show that this technique works with these.

Here is an example of how you can achieve your goal (I removed some of your CSS properties so that the demonstration is simple):

 *,*::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; position:relative; text-decoration: none; background-image: linear-gradient(60deg, #004494 0%, #7db9e8 78%, #c2dfed 100%); overflow: hidden; border-radius: 50%; flex: 1; margin: 24px; } .img-gallery a::before{ content:''; display:block; padding-bottom:100%; } .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; } .img-gallery span { position:absolute; top:3px;left:3px;right:3px;bottom:3px; border-radius: 50%; overflow: hidden; transition: transform 250ms; } .img-gallery img { width: 100%; height: 100%; object-fit: cover; transition:transform 0.5s; } .img-gallery a:hover img{ transform:scale(1.25); } 
 <div class="img-gallery"> <div class="row"> <a href="#" title="Show large image"><span><img itemprop="image" src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" id="img-1-3"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d6/df/51/d6df512a2f15f517767b4d82d2d97a4c.jpg" id="img-1-4"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/ec/a9/dd/eca9dd106a04cdbee399870252ef711f.jpg" id="img-1-5"></span></a> </div> <div class="row"> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/7d/01/19/7d0119a2fec989e208f288326c7cad0f.jpg" id="img-1-6"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d8/c3/32/d8c332d09b03673845b2e92a48816233.jpg" id="img-1-7"></span></a> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/88/3b/dd/883bddab14168f5f0807fec021002d8d.jpg" id="img-1-8"></span></a> </div> <div class="row"> <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/8e/4f/bb/8e4fbb89b155d15521b80d1baf9290d1.jpg" id="img-1-9"></span></a> </div> </div>

Source : Use flexbox and maintain a 1: 1 aspect ratio even though content is sized differently @ web-tiki