Question

这是我的jsfiddle代码。

<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;
}

https://jsfiddle.net/hgw7s9qf/

我花了一些时间研究如何使所有屏幕尺寸的元素都为正方形，然后再花一些时间尝试在该区域内设置不完全正方形的图像。我发现我无法一次拥有所有东西。

如何获得该图像以自适应地填充正方形，就像人们期望object-fit: cover那样工作，但仍然将该区域保持为动态调整大小的正方形？

重要：我需要它具有响应性，因此正方形会像窗口一样缩小，并且里面的图像也应该如此。

Answer 1

我不确定您的最终目标是什么，但是使用相同的标记，我可以使用它：

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

阅读this之后，我认为图像需要width和height的同时object-fit才能发挥其魔力，因为它适合图像调整大小。

希望有帮助。

Answer 2

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

<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;
}

工作小提琴

Square Image

Answer 3

我找到了方法。

我不太确定为什么会这样。也许你们中的一个聪明人可以帮助您。

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

https://jsfiddle.net/7f13rnvu/

需要图像以快速填充响应正方形区域

3 个答案: