Html 需要图像响应地填充响应的正方形区域

这是我的JSFIDLE代码

<div class="gallery-thumbnail">
    <a href="google.com">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/13Vend%C3%A9miaire.jpg/1024px-13Vend%C3%A9miaire.jpg" />
    </a>
</div>

.gallery-thumbnail {
    display: flex;
    max-width: 400px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: silver;
}
.gallery-thumbnail a { /* This magic makes a square, because the padding % is of the element's width. */
    height: 0;
    padding-bottom: 100%;
}
.gallery-thumbnail img {
  position: relative;
  object-fit: cover;
  width: 100%;
  background-color: green;
}

.图库缩略图{
显示器：flex；
最大宽度：400px；
对齐项目：居中；
证明内容：中心；
溢出：隐藏；
背景：银；
}
.gallery缩略图a{/*此魔术将生成一个正方形，因为填充%是元素的宽度*/
身高：0；
垫底：100%；
}
.图库缩略图{
位置：相对位置；
对象匹配：覆盖；
宽度：100%；
背景颜色：绿色；
}

我花了一段时间搜索如何为所有屏幕大小制作一个正方形元素，然后又花了一些时间尝试在该区域内设置一个不完全正方形的图像。我发现我不能一次拥有所有的东西

我怎样才能使图像适应填充正方形，就像人们期望的

对象适应：cover

那样工作，但仍然保持该区域为动态调整大小的正方形

---

重要提示：我需要它具有响应性，因此正方形会随着窗口的收缩而收缩，内部的图像也会收缩。

我不完全确定您的最终目标是什么，但使用相同的标记，我做到了：

.gallery-thumbnail {
    max-width: 400px;
    background: red;
}
.gallery-thumbnail img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 400px;
}

阅读后，我认为图像需要

宽度

和

高度

，以便

对象匹配

发挥其魔力，因为它适合图像大小

---

希望这会有所帮助。

要使图像正确呈方形，您需要为图像指定相同的高度和宽度。你可以这样试试

<div class="square">
  <div class="content">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/13Vend%C3%A9miaire.jpg/1024px-13Vend%C3%A9miaire.jpg" alt="">
  </div>
</div>

.square {
    border: 5px solid red;
    text-align: center;
    width: 50vw;
    height: 50vw;
  }

.content {
}
.content img{
  height: 50vw;
  width: 50vw;
}

.广场{
边框：5px纯红；
文本对齐：居中；
宽度：50vw；
高度：50vw；
}
.内容{
}
.内容img{
高度：50vw；
宽度：50vw；
}

工作小提琴

我找到了一个方法

确切地说，我不太清楚它为什么有效。也许你们中的一位才华横溢的人能帮上忙

.gallery-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}
.gallery-thumbnail img {
    position:absolute;
    object-fit: cover;
    width:100%;
    height:100%;
}

---

请注意，仅仅从

img

css中删除

width:100%

并不能满足我的要求，因为图像需要收缩，使其较短的边缘正好碰到正方形的边缘，因为

对象适合：封面

应该可以工作。在这种情况下，“完美正方形”是什么意思？你回答了你自己的问题，我不确定这两种情况下的意图是什么。你能详细解释一下吗？打开答案，玩玩它。当你调整窗口大小时，Napoleon仍然被裁剪成一个正方形，他会调整大小，使图像的边缘正好适合变化中的正方形。我正在尝试创建图库条目，在这里我可以使用不完美的方形图像进行预览。感谢您的回答，但请注意，当您运行代码时，方形不会相应地调整大小。我需要它缩小，因为你拉窗口更小，因为我的，但也包含像你的图像，但也动态调整图像大小，使它看起来像一个较小的版本，你的窗口缩小。这就像吃蛋糕和吃蛋糕一样，令人沮丧的是，css中没有一种方法可以设置

宽度：高度

，并完成它。我本来想在上面对你的答案进行评论，但我没有足够的声誉这么做，所以我想在这里回答。它之所以有效，是因为高度是在图像上设置的（相对于父级高度），我现在要小心使用

padding bottom

设置和测试您的响应大小，以确保它适用于您需要的所有场景和浏览器/设备；此页面可能有以下帮助：。祝你一切顺利。非常感谢你的帮助！我在谷歌搜索的第八页上找到了你的答案，搜索字符串是“css square缩略图站点：stackoverflow.com”。您的答案是第一个真正适用于响应画廊。干得好！