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

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!


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


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

And add a CSS selector:

.imgContainer {
  height: 400px;