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

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>

图像具有不同的尺寸有些比宽度高，有些比高度更宽。我怎样才能在响应的同时强制所有图像具有相同的高度。 他们可以使用宽度：100％，但我不能使用高度：自动，比例将保持不变。 我应该怎么做才能使我的图像平方，同时它们有响应并且我不知道％。

比如，绿衬衫的高度没有他的宽度

我想在没有 jquery 的情况下做到这一点，所以只使用 CSS！

Answer 1

你可以这样做：

用
1. padding-bottom:100%; overflow:hidden; position:relative 将图像包裹在容器中
将图像绝对放置在该容器内。

小提琴

说明：

Padding top/bottom（如 margin top/bottom）是根据父元素的宽度计算的。由于

.image

 div 与其父元素具有相同的宽度，因此设置 

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

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

Answer 3

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

类似帖子

Answer 4

这个链接对我有用。

JSFiddle 不用使用
<div><img/></div>

，而是使用 

background-position; background-size; background-repeat

 就能达到目的。

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>

Answer 6

在我看来，这是一个符合 Bootstrap 精神的解决方案：

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

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