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

HTML-CSS
1

Hello!

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!!

2

RIP Chomper :’( I’m afraid I don’t have a fix for this problem either but would love to find out!

1 Like
3

May be of help:

1 Like
4

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
5

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

}

1 Like
6

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;
}
1 Like