强制引导响应式图像成为正方形

Question

使用循环创建图像：

<div id="row">
    <div class="col-sm-6">
        <div id="row">
        <?php
        foreach ($products as $product)
        {
        ?>
            <div class="col-sm-6">
                <a href="/admin/product/"   class="thumbnail">
                <div class="caption">
                    title<br>
                    10  x viewed
                </div>
                <img src="/assets/img/product/<?php echo $product['img'] ?>" class="img img-responsive full-width" />
                </a>
            </div>
        <?php
        }
        ?>
        </div>
    </div>
</div>

这些图片来自不同的大小，有些比宽度高，有些比高度宽。我如何强制所有图片在响应式的同时拥有相同的宽度和高度？

它们可以具有widh：100％，但我不能使用height：auto，否则宽高比将保持不变。

为了使我的图片成为正方形，在它们是响应式的情况下且我不知道百分比应该做什么？

例如，绿色衬衫的高度不如它的宽度高。

我想只使用CSS而不是jquery来实现这一点！

- Sven van den Boogaart

Answer 1

你可以这样做：

1. 用 padding-bottom:100%; overflow:hidden; position:relative 包裹图片的容器。
2. 在该容器内绝对定位图片。

DEMO

解释：

上下内边距和上下外边距一样，是根据父元素的宽度计算的。由于 .image 容器的宽度与其父容器相同，设置 padding-bottom:100% 会使其高度等于宽度，因此它是正方形（其内容需要绝对定位或浮动以防止影响父容器的大小）。

HTML:

<div class="col-sm-6"> 
    <a href="#" class="thumbnail">
        <div class="caption">
            title<br/>3 x bekeken
        </div>
        <div class="image">
            <img src="" class="img img-responsive full-width" />
        </div>
    </a>
</div>

CSS：

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
}

- web-tiki

---

我还为较小的图像添加了以下内容：min-height: 100%; min-width: 100%。 - Sheharyar

这对我不起作用，我必须添加一些额外的样式，这是我的情况： .image img {width: 100%; height: 100%; display: block; object-fit: cover; position: absolute; - Tạ Anh Tú

Answer 2

以下是适用于各种大小图片的最佳解决方案： http://jsfiddle.net/oboshto/p9L2q/53/

HTML 代码不变：

<div class="col-sm-6"> 
    <a href="#" class="thumbnail">
        <div class="caption">
            title<br/>3 x bekeken
        </div>
        <div class="image">
            <img src="" class="img img-responsive full-width" />
        </div>
    </a>
</div>

新的CSS：

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
      position: absolute;
      max-width: 100%;
      max-height: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
}

- oboshto

---

这个实际上是有效的。上面的web-tiki示例对于纵向图像效果不佳（它会裁剪它们而不是将它们适配到正方形中）。 - caponica

非常完美的答案，非常感谢。 - A1Gard

当图像几乎是正方形时，这个功能完美地工作了。它按预期进行了裁剪。 - JoeGalind

几乎完美，但应该是 min-width 和 min-height。 - Raptor

@Raptor 如果你想看完整的图片，就不能使用 min-height。使用 min-height 会裁剪图片。 - noregt

Answer 3

您可以将每个图像包装在一个 div 中，然后将 div 的溢出设置为隐藏。只要 div 是正方形，那么您的图像就会被裁剪。div 也可以是响应式的。类似的帖子

- miriye

---

但是有些图像的高度与宽度不相等。 - Sven van den Boogaart

你可以添加一小段JavaScript/jQuery来处理方向的计算。例如 $(function(){ $('.img').each(function(){ if($(this).outerWidth(true) <= $(this).outerHeight(true) {//not as wide as tall} else { //not as tall as wide } }) }) - miriye

Answer 4

这个链接对我有效。JSFiddle
使用background-position；background-size；background-repeat代替<div><img/></div>，就能达到同样的效果。

- Elm Liu

Answer 5

Web-tiki的答案对我来说几乎有效，对于更大的图像，我不得不添加这个HTML和CSS让它们在正方形中居中：

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div class="col-sm-6"> 
<a href="#" class="thumbnail">
    <div class="caption">
        title<br/>3 x bekeken
    </div>
    <div class="image">
        <img src="" class="img img-responsive full-width" />
    </div>
</a>
</div>

- Igor Benić

Answer 6

这是我个人认为符合Bootstrap精神的解决方案：

<div class="ratio ratio-1x1">
  <img class="img-fluid src="my_image.png" />
</div>

在Bootstrap 5.3上进行了测试，但在Bootstrap 5中已经支持了这种比例方式，并且在Bootstrap 4中也以不同的模式支持。

- Giorgio Barchiesi