Rectangle 27 0

css Force bootstrap responsive image to be square?


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

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

This one worked perfectly when the image was almost square. It cropped just as expected.

Note
Rectangle 27 0

css Force bootstrap responsive image to be square?


$(function(){ $('.img').each(function(){  if($(this).outerWidth(true) <= $(this).outerHeight(true) {//not as wide as tall} else { //not as tall as wide } }) })

but some images are not as height as they are wide.

Note
Rectangle 27 0

css Force bootstrap responsive image to be square?


.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
}
<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>
padding-bottom:100%; overflow:hidden; position:relative
  • position the image absolutely inside that container.

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

You can do this :

Note
Rectangle 27 0

css Force bootstrap responsive image to be square?


.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
}
<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>
min-height: 100%; min-width: 100%
padding-bottom:100%; overflow:hidden; position:relative
  • position the image absolutely inside that container.

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

You can do this :

Note
Rectangle 27 0

css Force bootstrap responsive image to be square?


$(function(){ $('.img').each(function(){  if($(this).outerWidth(true) <= $(this).outerHeight(true) {//not as wide as tall} else { //not as tall as wide } }) })

but some images are not as height as they are wide.

Note
Rectangle 27 0

css Force bootstrap responsive image to be square?


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

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

This one worked perfectly when the image was almost square. It cropped just as expected.

Note
Rectangle 27 0

css Force bootstrap responsive image to be square?


.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
}
<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>
padding-bottom:100%; overflow:hidden; position:relative
  • position the image absolutely inside that container.

Nice its working, could you explain what the css (padding-bottom:100%) is for and i will check as answer

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

You can do this :

Note
Rectangle 27 0

css Force bootstrap responsive image to be square?


$(function(){ $('.img').each(function(){  if($(this).outerWidth(true) <= $(this).outerHeight(true) {//not as wide as tall} else { //not as tall as wide } }) })

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

but some images are not as height as they are wide.

Note