Click here to view the project
Please check out my Tribute Page Project. I have strict to the basics and kept similar to sample project shown before the challenge. I added some images at the bottom of the page which has “col-lg-4” class from bootstrap but I am not able to understand how to keep those images to the same height and keep them responsive. I have tried fixed height but then images don’t remain responsive for obvious reasons.
I have also searched on google but I was not able to get any satisfying solution.
Update: Thank you guys, I finally solved it. I changed height to max-height and gave fixed height then it solved my issue.
It looks very nice, keep up the good work! As for your problem with scaling, I think you would want to use xs, which scales up. There is a link at the bottom for more information.
Thank you for your appreciation and valuable feedback. I tried with col-xs-* but it completely messes up my view on large screens/laptop. I have attached the screnshot
Hello, could not open your codepen, but from the screenshot, have you tried setting the image height and width manually then use bootstrap .img-responsive, .center-block and .col-sm-*. These should work. If it does not work try using some css media query.
So, it looks like it works now. What did you do?
Did not do anything…just wrote what you have to do
oh, I was talking to @ricky641 sorry. I was wondering what he did to fix it.
Ok I will try it.
Thanks for your feedback
It works for all screens but 2 images have different height due to which it is not looking good. I tried to fix heights but then images were no more responsive.
I have edited my post so now you can open the link.
Yes, I saw this when I first looked, but they are appearing the same height now, so I thought you’d fixed it.
But what I see now is that they are different widths (not heights) when I go to mobile view.
Hope you don’t mind me following your progress with this. I’m just trying to learn.
Hello ricky641, i noticed that the images are of different width and height, checked it by inspecting the elements. (Normally you would edit the picture using a picture editor like photoshop etc to give it your width and height before using it on the web, so that they are equal). But the height:100% worked but width didn’t, so i tried giving the pele image a width of 258px and it worked and equal with Mohenjo Daro (2016) even on mobile and its still responsive with the .img-responsive class. you can try and see.
Thank you! I see now that they have different widths. Good observation skills . No issue mate. I am also learning and I think this is the best way to learn.
Thank you! Yes, it now looks fine on all screens. I always try to avoid giving fix width and height but I guess in some situation it becomes necessary to do that.
To avoid that, maybe you try editing the picture before you use it so it become equal
Ok sure. I was directly using those images from url, therefore I was not able to edit it. I will surely keep that in mind in future projects.
Thank you to all of you amazing/awesome people for helping me out.