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>

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

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

I want to do this without jquery so CSS only!

回答1:

You can do this :

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

FIDDLE

Explanation :

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:

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

回答2:

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

HTML the same:

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

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

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/23400232/force-bootstrap-responsive-image-to-be-square

标签

css

twitter-bootstrap

responsive-design