Css 使用flexbox并保持1:1的纵横比，即使内容大小不同

关于保持元素的纵横比（使用flexbox或不使用flexbox），有很多问题。但是，我的问题略有不同，因为我希望覆盖子图像元素的纵横比：

确保图像完全覆盖元素（

对象匹配：覆盖

）

确保元素为1:1（即一个完美的圆）

确保溢出的图像被隐藏

换句话说，图像必须表现为元素的背景（尽管我不能将它们用作背景图像），其纵横比始终为1:1且具有响应性

在下面的示例中，除了

---

非常简单：您可以使用

填充底部：100%

hack强制1:1的纵横比。根据CSS规范，当以百分比表示时，垂直边距/填充引用父宽度。这背后的逻辑从未得到明确解释，但我怀疑是为了防止循环计算

无论如何，现在您知道可以使用

填充底部：

强制使用固定的纵横比；）现在我们只需将其应用于

.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：我不太清楚为什么要在悬停时将第n个子元素（2n）上的填充设置为0，所以我现在已经删除了它

以下是一个概念验证示例：

*，
*：：之前，
*：：之后{
框大小：边框框；
保证金：0；
填充：0；
}
.img画廊{
背景：#fafafa；
填充：24px；
最小宽度：320px；
宽度：90%；
保证金：0自动；
}
.img画廊{
显示器：flex；
柔性包装：nowrap；
证明内容：周围的空间；
对齐项目：居中；
}
.img画廊a{
显示：块；
文字装饰：无；
背景图像：线性梯度（60度，#004494 0%，#7db9e8 78%，#c2dfed 100%）；
溢出：隐藏；
边界半径：50%；
填充：3倍；
弹性：1；
利润率：0.24px；
过渡：填充200ms；
}
.img gallery.行：类型a的第一个：非（：第n个子（2））{
宽度：30%；
宽度：计算（（60%-96px）/2）；
}
.img gallery.行：类型a的第一个：第n个子项（2）{
弹性：2；
填充：4px；
}
.img画廊跨度{
身高：0；
显示：块；
边界半径：50%；
位置：相对位置；
垫底：100%；
溢出：隐藏；
转换：转换250ms；
z指数：2；
}
.img画廊{
宽度：100%；
对象匹配：覆盖；
转换：转换250ms；
}
.img画廊a：悬停式img{
转换：比例（1.25）；
}
.img画廊跨度：：之前{
内容：“；
背景图像：线性梯度（60度，透明48%，#ffc5e7 100%）；
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：2；
边界半径：50%；
不透明度：.72；
}

---

要保持响应元件的纵横比，您可以使用。
请注意，对于flex子项，不应在填充底部/顶部时使用百分比。
可以创建网格，并添加边界半径使其成为圆形

对于图像，

对象匹配：cover属性完全满足您的需要：保持图像原始纵横比并完全覆盖元素。

我把第一张图片改成了一张风景图片，显示这项技术也适用于这些图片

下面是一个如何实现目标的示例（我去掉了一些CSS以保持演示的简单性）：


*，*：：之前，*：：之后{
框大小：边框框；
保证金：0；
填充：0；
}
.img画廊{
背景：#fafafa；
填充：24px；
最小宽度：320px；
宽度：90%；
保证金：0自动；
}
.img画廊{
显示器：flex；
柔性包装：nowrap；
证明内容：周围的空间；
对齐项目：居中；
}
.img画廊a{
显示：块；
位置：相对位置；
文字装饰：无；
背景图像：线性梯度（60度，#004494 0%，#7db9e8 78%，#c2dfed 100%）；
溢出：隐藏；
边界半径：50%；
弹性：1；
利润率：24px；
}
.img画廊a：：之前{
内容：''；
显示：块；
垫底：100%；
}
.img gallery.行：类型a的第一个：非（：第n个子（2））{
宽度：30%；
宽度：计算（（60%-96px）/2）；
}
.img gallery.行：类型a的第一个：第n个子项（2）{
弹性：2；
}
.img画廊跨度{
位置：绝对位置；
顶部：3px；左侧：3px；右侧：3px；底部：3px；
边界半径：50%；
溢出：隐藏；
转换：转换250ms；
}
.img画廊{
宽度：100%；
身高：100%；
对象匹配：覆盖；
转变：转变0.5s；
}
.img画廊a：悬停式img{
转换：比例（1.25）；
}

所有图像都是纵向模式？（即，高度>宽度）@vals不，尺寸无法预先知道。不幸的是，这遇到了我以前遇到的问题：这只适用于所有图片都具有纵向的情况，而我所有的示例恰好都具有纵向。在我的作品中，我添加了一幅风景画的例子，表明这并没有达到预期效果。（图中没有覆盖范围。）这与特里的答案之间的差异并不明显。询问者可能应该提供一些风景图片供你使用，这样你就可以显示你的图片是否与它们一起工作（询问者需要）。好的观点@BoltClock。我将第一个图像更改为横向图像，以显示
对象适合：cover属性也适用于这些。哦，好东西。我也没有注意到询问者确实已经编辑添加了风景图片。