How do I make images display as a square?

Question

I've been playing around with bootstrap 4 alpha version lately to create a project and after a lot of trying I can't make uploaded images of different sizes display as a square when I display them.

Remember how Instagram only displayed square images for thumbnails? I want to achieve that. I have done some research and tried a bunch of things written down by other people but the only thing that came close enough to that was this one: https://stackoverflow.com/a/23518465/1067213

but the result is not what I actually want it to do:

As you can see the images are not square and there is a gap underneath the first one so that it aligns with the other two columns (I do want all columns to be the same width and height).

I use Django to create the URLs to the image files.

Here is my html:

<div class="row">
    {% if competition_list %}
    {% for competition in competition_list %}

        <div class="col-md-4">
          <div class="card">
            <div class="image">
            <img class="card-image-top img-fluid" src="/{{competition.image.url}}" >
            </div>
            <div class="card-block">
              <h4 class="card-title">{{competition.name}}</h4>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p><a class="btn btn-secondary" href="https://v4-alpha.getbootstrap.com/examples/jumbotron/#" role="button">View details »</a></p>
            </div>
            </div>
        </div>

    {% endfor %}
    {% else %}
    <p>No competitions in this category, please try an other category</p>
    {% endif %}
    </div>

Here is my CSS:

.card {
    margin-bottom: 10px;
}

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
}

the ideal result would look a bit like this:

Let me know if you need any more information.

Thanks in advance!

Answer 1

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.

Answer 2

You can use a wrapper and play with width, max-width and min-height:

<div class="image-wrapper">
  <img src="http://placehold.it/350x300">
</div>

<div class="image-wrapper">
  <img src="http://placehold.it/500x350">
</div>

<div class="image-wrapper">
  <img src="http://placehold.it/300x500">
</div>

You set the width to 100%, and it will scale the height.

.image-wrapper {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  margin: 10px 0;
}
.image-wrapper img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

Added, top, left and transform so the image is centered vertically.

You can also use background-size: cover and play with background-position.

<div class="use-cover-background square" style="background-image: url(http://placehold.it/350x300)"></div>

<div class="use-cover-background square" style="background-image: url(http://placehold.it/500x300)"></div>

<div class="use-cover-background square" style="background-image: url(http://placehold.it/300x500)"></div>

// CSS

.use-cover-background {
  background-size: cover;
  background-position: center;
}
.square {
  margin: 10px 0;
  width: 300px;
  height: 300px;
}

See them working: https://jsfiddle.net/mcgnyfw9/

Regards,