Force Bootstrap Responsive Image to Be Square

Force bootstrap responsive image to be square

You can do this :

1. wrap the image in a container with padding-bottom:100%; overflow:hidden; position:relative
2. 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;
}

Force Images to be square and centered in css

try like this

.img-container {
  position:relative;
}

.img-container img {
  position:absolute;
  margin:auto;
  top:0;
  right:0;
  left:0;
  bottom:0;
  max-height:100%;
  max-width:100%;    
}

JS Fiddle

How do I make images display as a square?

This really has nothing to do with Django or Bootstrap. You'll want to set your images as backgrounds on .image so they can be cropped to square.

<div class="image" style="background-image: url(/{{competition.image.url}});" ></div>

Also make sure you have CSS applied to fill the element with the background image:

.card .image {
    background-size: cover;
}

You could also try to force the image to stretch to 100% of the height of .image and hide the horizontal overflow, but the background approach is simpler.

Adjusting and image size to fit a div with Bootstrap

You can explicitly define the width and height of images, but the results may not be the best looking.

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

---

...per your comment, you could also just block any overflow - see this example to see an image restricted by height and cut off because it's too wide.

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

---

Related Topics