Force bootstrap responsive image to be square

Question

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

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

I want to do this without jquery so CSS only!

web-tiki · Accepted Answer · 2014-05-08T13:21:51.110

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

I also added these for smaller images: `min-height: 100%; min-width: 100%` — Sheharyar, Nov 20 '17 at 04:36
This doesn't work for me, I have to add some extra styles, here is my case: `.image img {width: 100%; height: 100%; display: block; object-fit: cover; position: absolute;` — Tạ Anh Tú, Mar 01 '22 at 03:48

score 33 · Answer 2 · answered Mar 10 '16 at 14:34

33

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

answered Mar 10 '16 at 14:34

oboshto

3,478
4
25
24

2

This one actually works. The web-tiki example above does not work well for portrait image (it crops them instead of fitting them in the square). – caponica Mar 10 '16 at 17:31
1

Its prefect answer, Thanks so much. – A1Gard Jun 02 '17 at 21:50
This one worked perfectly when the image was almost square. It cropped just as expected. – JoeGalind Sep 08 '17 at 18:35
Almost perfect, but it should be `min-width` and `min-height`. – Raptor Jun 19 '20 at 02:17
@Raptor not if you want to see the complete image. With `min-height` the image will be cropped – noregt Feb 19 '21 at 09:54

score 1 · Answer 3 · edited May 23 '17 at 12:25

1

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

edited May 23 '17 at 12:25

Community

1
1

answered May 01 '14 at 00:27

miriye

143
5

but some images are not as height as they are wide. – Sven van den Boogaart May 01 '14 at 00:30
You could add a small bit of javascript/jquery to handle figuring out the orientation. For example `$(function(){ $('.img').each(function(){ if($(this).outerWidth(true) <= $(this).outerHeight(true) {//not as wide as tall} else { //not as tall as wide } }) })` – miriye May 01 '14 at 00:41

score 0 · Answer 4 · answered Oct 28 '19 at 14:20

0

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

answered Oct 28 '19 at 14:20

Elm Liu

65
8

score 0 · Answer 5 · answered Nov 15 '20 at 13:53

web-tiki answer almost worked for me, for bigger images I had to add this HTML and CSS to have them centered within the square:

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

Force bootstrap responsive image to be square

5 Answers5

Linked