使用 flexbox 并保持 1:1 纵横比,即使内容大小不同
Use flexbox and maintain a 1:1 aspect ratio even though content is sized differently
SO 上有很多关于保持元素的纵横比(有或没有 flexbox)的问题。但是,我的问题略有不同,因为我想覆盖子图像元素的纵横比:
- 确保图像完全覆盖元素 (
object-fit: cover
)
- 确保元素是 1:1(即完美的圆)
- 确保溢出的图像被隐藏
换句话说,图像必须表现得好像它是元素的背景(虽然我不能将它们用作背景图像),其纵横比始终为 1:1 和响应。
在下面的示例中,除了 <a>
元素适应其图像后代之外,一切正常。但我希望他们保持 1:1 的比例,这样我就能得到完美的圆圈。 (不过,第一行中间的必须比其余的大。)
HTML 无法更改,但我可以使用现代 CSS 属性,例如 object-fit 和 flexbox。 (只要 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>
说明 Terry 的代码何时不起作用的代码:风景图片。
*,
*::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>
这很简单:您可以使用 padding-bottom: 100%
hack 强制 1:1 纵横比。根据 CSS 规范,垂直 margins/paddings,当以百分比声明时,引用父宽度。这背后的逻辑从来没有解释清楚,但我怀疑是为了防止循环计算。
无论如何,现在您知道可以使用 padding-bottom: <percentage>
强制固定纵横比 ;) 现在我们只需将其应用于 .img-gallery span
。请记住将其高度设置为 0,因为我们不再需要指定高度:
.img-gallery span {
height: 0;
display: block;
border-radius: 50%;
position: relative;
padding-bottom: 100%;
overflow: hidden;
transition: transform 250ms;
z-index: 2;
}
p/s:我不太确定为什么要在 :nth-child(2n)
元素悬停时将填充设置为 0,所以我暂时将其删除。
这是一个概念验证示例:
*,
*::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/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>
要保持响应元素的纵横比,您可以使用padding technique。
请注意,对于 flex 子项 bottom/top,您不应在填充上使用百分比 see here for more info。
您可以制作 responsive squares 的网格并添加 border-radius 使它们成为圆形。
对于图像,object-fit: cover;
属性 完全满足您的需求:保持图像原始宽高比并完全覆盖元素。
我将第一张图片更改为风景图片,以表明该技术也适用于这些图片。
这是一个如何实现目标的示例(我删除了一些 CSS 以保持演示简单):
*,*::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>
请注意,您需要根据需要支持的浏览器为转换和转换属性添加供应商前缀。参见 transforms and transitions.
的 canIuse
SO 上有很多关于保持元素的纵横比(有或没有 flexbox)的问题。但是,我的问题略有不同,因为我想覆盖子图像元素的纵横比:
- 确保图像完全覆盖元素 (
object-fit: cover
) - 确保元素是 1:1(即完美的圆)
- 确保溢出的图像被隐藏
换句话说,图像必须表现得好像它是元素的背景(虽然我不能将它们用作背景图像),其纵横比始终为 1:1 和响应。
在下面的示例中,除了 <a>
元素适应其图像后代之外,一切正常。但我希望他们保持 1:1 的比例,这样我就能得到完美的圆圈。 (不过,第一行中间的必须比其余的大。)
HTML 无法更改,但我可以使用现代 CSS 属性,例如 object-fit 和 flexbox。 (只要 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>
说明 Terry 的代码何时不起作用的代码:风景图片。
*,
*::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>
这很简单:您可以使用 padding-bottom: 100%
hack 强制 1:1 纵横比。根据 CSS 规范,垂直 margins/paddings,当以百分比声明时,引用父宽度。这背后的逻辑从来没有解释清楚,但我怀疑是为了防止循环计算。
无论如何,现在您知道可以使用 padding-bottom: <percentage>
强制固定纵横比 ;) 现在我们只需将其应用于 .img-gallery span
。请记住将其高度设置为 0,因为我们不再需要指定高度:
.img-gallery span {
height: 0;
display: block;
border-radius: 50%;
position: relative;
padding-bottom: 100%;
overflow: hidden;
transition: transform 250ms;
z-index: 2;
}
p/s:我不太确定为什么要在 :nth-child(2n)
元素悬停时将填充设置为 0,所以我暂时将其删除。
这是一个概念验证示例:
*,
*::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/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>
要保持响应元素的纵横比,您可以使用padding technique。
请注意,对于 flex 子项 bottom/top,您不应在填充上使用百分比 see here for more info。
您可以制作 responsive squares 的网格并添加 border-radius 使它们成为圆形。
对于图像,object-fit: cover;
属性 完全满足您的需求:保持图像原始宽高比并完全覆盖元素。
我将第一张图片更改为风景图片,以表明该技术也适用于这些图片。
这是一个如何实现目标的示例(我删除了一些 CSS 以保持演示简单):
*,*::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>
请注意,您需要根据需要支持的浏览器为转换和转换属性添加供应商前缀。参见 transforms and transitions.
的 canIuse