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％，但我不能使用身高：自动，比率将保持不变。我该怎么办才能使我的图像在响应时平方，我不知道％。

Example

例如，绿色衬衫没有宽度

我想在没有jquery的情况下这样做，所以只有CSS！

Answer 1

你可以这样做：

将图片包装在padding-bottom:100%; overflow:hidden; position:relative
将图像绝对放在该容器内。

<强> FIDDLE

说明：

根据父元素的宽度计算填充顶部/底部（如边缘顶部/底部）。由于.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也可以响应。 similar post

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>

强制自举响应图像为方形

5 个答案: