Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mohan Pierce
Mohan Pierce
142 Points

How to create dynamic heights with bootstrap

https://codepen.io/mohanpierce007/pen/BmjObg

Hey Im having a basic page with two images in bootstraps grid which is responsive as of now using img-responsive class of bootstrap,the problem i have his my second images height is less compared to the left one,so wen i explicitly add a class to the second image and give it an height of 462.5px which is equal to the first image height my second image isnt being responsive wht am i missing here How could i add explixit heights and also maek sure they are responsive

5 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The issue is a result of the photos having different aspect ratios.

Pixel dimensions aren't responsive. Use percentages or screen-relative units instead.

Here's an example using screen-relative units, with a media query to only impose the constraint when both photos are on the same line:

@media (min-width: 992px) {
  .row img {
    height: 25vw;
    margin: auto;
  }
}
Mohan Pierce
Mohan Pierce
142 Points
Mohan Pierce
Mohan Pierce
142 Points

i used percentages yet it wasnt responsive whenever height is siad exolicitly it gets unresponsive

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

For percentages to work you'd need to enclose the images in a containing element. Using screen-relative units is a bit simpler, though you may see some slight aspect distortion at some sizes.

See the example I added to my answer.

Mohan Pierce
Mohan Pierce
142 Points
Mohan Pierce
Mohan Pierce
142 Points

Thanks man!! Aspect ratios were the problem 25vw worked very well but still What i did yesterday to solve this was i took the first image which was perfect and didnt need any height alteraltions Resolutions went to a resolution changer in google and uploaded the second image and changed the resolution of it to same as first image after that img-responsive class worked like wonder It was responsive after then,But ty i know y it didnt work back then

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Having both images with the same aspect is better. The extra code is only needed to compensate when that's not possible.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Hey Mohan Pierce,

Here's another idea for dealing with images of different aspect ratios and keeping them from distorting as they stay responsive.

The problem with setting an arbitrary height to images of different aspect ratios is that you'll still run into distortion. 25vh still gives you the same problem as just picking a height of 450px as an example.

As developers we can't always guarantee that images will be the same aspect ratio, so one common way to deal with this is to nest the images inside of a parent wrapper, absolute position the images to their parent wrapper, make sure the image is either as wide, or as tall as it's parent, and then use the parent to hide the overflow, or basically crop the image that expands past the confines of it's parent.

I forked your codepen, and tweaked it a bit to give you an idea of what I am talking about. There are some other changes in the structure I would make, but I purposely made as few changes as I could figure out, which is why there are so many !important rules that I generally try to stay away from.

Check out this codepen, hope it helps: https://codepen.io/kevink/pen/LONEVb

Mohan Pierce
Mohan Pierce
142 Points
Mohan Pierce
Mohan Pierce
142 Points

Hey Kevin thanks for the feedback tho even after U did all the tweaking with aspect rations still the second image is still unresponsiveits not responsive like the first one?

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

It's as responsive as it can be. Because the aspect ratios of the images are so drastic, you have two options with CSS.

  1. Each image can be at max 100% of the height or width of it's container (this meas that the image will either appear skinnier of shorter then the other image.
  2. Each image can fill the parent by it's shorter size, and the overflow can be cropped. This is the direction I went. The picture of Elon is responsive in that the image stays centered and cropped as the screen size changes. This doesn't distort the image.

Both of these solutions prevent distorting either image's aspect ratio. However if you want images of different native sizes to fit into a neat grid and share the same height/width, the second way is the way to go.

Looking at your example now, your picture of the guy on the left is not as wide as it's container, and not as wide as the picture of Elon. The picture of Elon is very clearly distorted, it's normal aspect ratio has been broken by the CSS.