css – 强制自适应图像为正方形

图像创建在一个循环中：

<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％,但是我不能使用height：auto,比例会保持不变.
我应该怎么做,使我的图像平方,而他们的响应,我不知道％.

例如,绿色的衬衫不如他的宽度那么高

我想这样做没有jquery所以CSS只有！

解决方法

你可以这样做 ：

>将图像包装在带有padding-bottom的容器中：100％;溢出：隐藏;位置：相对
>将图像绝对置于该容器内.

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

原文地址：https://www.jb51.cc/css/216573.html