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.
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.
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.
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.
. No issue mate. I am also learning and I think this is the best way to learn.