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

Force bootstrap responsive image to be square

提问by Sven van den Boogaart

Images are created in a loop with:

图像是在循环中创建的：

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

The images are from diffrent sizes some are higher then the width, and some are wider then the height. how can i force all images to have the same with as the height while being responsive. It is ok for them to have widh:100%, but i can not use height:auto, the ratio will stay then. What should i do to make my images squared while they are responsive and i dont know the %.

图片来自不同的尺寸，有些比宽度高，有些比高度宽。如何在响应时强制所有图像与高度相同。他们可以使用宽度：100％，但我不能使用高度：自动，比例将保持不变。我应该怎么做才能使我的图像在响应时平方而我不知道 %.

Example, the green shirt is not as high as his width

例如，绿色衬衫没有他的宽度那么高

I want to do this without jquery so CSS only!

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

回答by web-tiki

You can do this :

你可以这样做 ：

1. wrap the image in a container with padding-bottom:100%; overflow:hidden; position:relative
2. position the image absolutely inside that container.

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

FIDDLE

小提琴

Explanation :

解释 ：

Padding top/bottom (like margin top/bottom) is calculated according to the width of parent element.As the .imagediv has the same width as its parent, setting padding-bottom:100%;give it the same height as its width so it is square (its content needs to be absolutely positioned or floated so it doesn't change the parent's size).

Padding top/bottom (like margin top/bottom) 是根据父元素的宽度计算的。 由于.imagediv和父元素的宽度相同，设置padding-bottom:100%;给它的高度和宽度一样，所以它是方形的（它的内容需要绝对定位或浮动，因此它不会改变父级的大小）。

HTML:

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:

CSS：

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

回答by oboshto

Here is the best solution for every size of images http://jsfiddle.net/oboshto/p9L2q/53/

这是每种尺寸图像的最佳解决方案 http://jsfiddle.net/oboshto/p9L2q/53/

HTML the same:

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>

New CSS:

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

回答by miriye

You could wrap every image in a div and then set the div's overflow to hidden. As long as the div is square then you're image will appear cropped. The div can be responsive as well. similar post

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

回答by Elm Liu

This link works for me.JSFiddle
Instead of using <div><img/></div>, background-position; background-size; background-repeatwill do the trick.

这个链接对我有用。JSFiddle
而不是使用<div><img/></div>，background-position; background-size; background-repeat就可以解决问题。