Force bootstrap responsive image to be square
css, responsive-design, twitter-bootstrap
Solution
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;
}
Problem
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!