Lately, I've been experimenting with the alpha version of bootstrap 4 for a project. No matter how hard I try, I can't seem to get uploaded images of different sizes to display as squares when displayed.
Do you remember how Instagram used to only display square thumbnails? That's what I'm trying to achieve. I've done some research and tried various methods suggested by others, but nothing has quite hit the mark like this one did:
However, the result is not exactly what I desire: https://i.sstatic.net/ZTfYx.jpg
As you can see, the images are not square, and there is a gap under the first one in order to align it with the other two columns (I want all columns to be the same width and height).
I generate image URLs using Django.
Here is the HTML I am using:
<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 another category</p>
{% endif %}
</div>
Below is my CSS code:
.card {
margin-bottom: 10px;
}
.image{
position:relative;
overflow:hidden;
padding-bottom:100%;
}
.image img{
position:absolute;
}
The desired outcome would somewhat resemble this:
https://i.sstatic.net/VMsom.png Let me know if you require any further information.
Thank you in advance!