Please help! How do I change image size using bootstrap?


How do I take the 3 images that I’ve set next to each other and make them the same height using bootstrap?

view page here

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!

1 Like

May be of help:

1 Like

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.

1 Like

You could do btn-block, but I am pretty sure that only change the width. You could also use css


you could make it bigger or smaller, you can also replace pixels with vh


1 Like

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('') no-repeat center / cover;">

And add a CSS selector:

.imgContainer {
  height: 400px;
1 Like