I have 3 images for my tribute page. They are different heights. If I set the width and height in px, I can make all the images equal in size (and it doesn’t distort them too much), but then when I resize the screen they overlap and that’s the issue Im trying to overcome.
I have made the images img-responsive so it’s self adjusts now, but I don’t think it looks right that they are different sizes.
How can I make my images the same size but also responsive.
to do that you ideally need your images the same dimensions. You can crop the image on your computer which i’m not sure is much use for codepen, or you can do it in css. Your other option is using the cover properties and setting the images as the backgrounds to the pic container. I think any other method (that i can think of) will not keep the aspect ratio and so squash the bigger pic.
Yeah, I had same problems. There are several methods:
One best way to “resize” your images for free is to use GIMP. It’s awesome freeware that is almost better than Adobe Photoshop, and it will let you resize the image to exact specs.
Secondly, you could fix the div sizes, then “put” the images inside these div boxes (similar to bootstrap style div’s) and control the images by centering it or making it 100%width of the div’s boxes. You then control the image overflow by setting overflow in css settings.
That way, you can have separate control of bootstrap div boxes for responsive, and image sizing within each box.
So I just want to clarify, you want the images to stay the size that they are when the page is first loaded? Or do you want them to shrink or re-align so that they are displayed vertically? To keep them the same size you could just set the min-width to whatever size, or do a media query to re-align when you shrink the page (assuming you wanted it to look nice on mobile).