强制引导响应图像是正方形 [英] Force bootstrap responsive image to be square

问题描述

图片是在一个循环中创建的：

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>

图片来自不同尺寸有些高于宽度 有些宽度高于高度。如何能够强制所有图像具有相同的高度，同时响应。
他们有broadh：100％是确定，但我不能使用height：auto，比率将保持不变。
我应该做什么，使我的图像平方，而他们是响应，我不知道％。

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

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

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

I want to do this without jquery so CSS only!

推荐答案

您可以这样做：

1. 将图像包装在 padding-bottom：100％ overflow：hidden;位置：相对


2. 将图片绝对放在该容器内。

FIDDLE

FIDDLE

说明：

顶部/底部填充（如顶部/底部边距）根据父元素的宽度计算。由于 .image div的宽度与父对象的宽度相同，设置 padding-bottom：100％; 是正方形（其内容需要绝对定位或浮动，所以它不会更改父级的大小）。

Padding top/bottom (like margin top/bottom) is calculated according to the width of parent element.As the .image div 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).

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>

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

这篇关于强制引导响应图像是正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！