Why is my img-responsive class not scaling correctly?

Question

http://www.blessedbythebestbarbershop.com/photos.html
The bottom right picture keeps getting resized to a different height for some reason and im not sure why. The image size is the same as the other 5. Can anybody tell why its doing that?

link to source

Answer 1

Adding to what Syden says

Currently first images: 720px × 960px (scaled to 350px × 467px)
Currently 6th image: 528px × 960px (scaled to 350px × 636px)

This 6th image has a different aspect ratio to the others (having 11 : 20 rather than 15 : 20).

Your images are scaled to a set forced width (350px), so the height of the image is in proportion to it's scaled width. In order to fix you need to keep the image aspect ratios all exactly the same, so when they're of equal width, they will all be of equal height.

There are various solutions such as force CSS cropping of the image and setting a maximum height but you probably won't want these. It's much easier to simply resize the 6th image in accordance with the others.

Answer 2

Because some images are 720 x 960px and some 528 x 960px.

Photoshop them all to a static same size if you can.