Hello!
How do I take the 3 images that I’ve set next to each other and make them the same height using bootstrap?
Your help is greatly appreciated!!
Hello!
How do I take the 3 images that I’ve set next to each other and make them the same height using bootstrap?
Your help is greatly appreciated!!
RIP Chomper :’( I’m afraid I don’t have a fix for this problem either but would love to find out!
May be of help:
Use CSS to change the width and height of the images, or use a photo editor to edit your images to be the same size.
You could do btn-block, but I am pretty sure that only change the width. You could also use css
ex
.whatever-your-class{
width:50px;
height:50px
you could make it bigger or smaller, you can also replace pixels with vh
}
One of the suggestions in the SO link I previously posted has you set the image to the background image of some fixed-size containing element. I did this in my FCC portfolio project. That uses Material Design Lite instead of Bootstrap, so some of the class names will look unfamiliar (all the “mdl-” prefixed ones). It uses Angular to dynamically template out the image URLs from my data/model, so the img URLs will also look strange to the unfamiliar. But the point is, instead of <img>
, set a background image on a <div>
.
If you resize my portfolio page you can see the background images stay centered in the containing div’s, zoom in/out, and overflow is invisible.
In your case, I would continue to use Bootstrap thumbnails, but replace the <img>
tags with <div>
s with the <div>
's background set to your image. Syntax using CSS background shorthand property:
<div class="imgContainer" style="background: url("your_image.png") no-repeat center / cover;" >
I confirm this works in your pen. Replace your <img>
tags with the following:
<div class="imgContainer"
style="background: url('https://scontent.fsjc1-3.fna.fbcdn.net/v/t1.0-9/10378074_961162023910512_7466800143488027894_n.jpg?oh=694730adc50415fd41729a406bcc97c0&oe=58EE4C5B') no-repeat center / cover;">
</div>
And add a CSS selector:
.imgContainer {
height: 400px;
}