Issue with images on my site


So my goal is to have all of the images next to each other, but equal width and height. Currently they are a bit funky :frowning: Any help on what do would be greatly appreciated. Thanks!


One possible solution could be to provide fixed width and height and use object-fit css property.

since each of your images are naturally different sizes setting a similar fixed size them will cause skewing and may not look right.

you have a few options…

  1. throw them into a paint program and manually clip them to the same height.
  2. you can wrap them in a div, give the div’s similar size and insert the images as background images. this will simulate the ‘manual clipping’ and you can move the image around in the available viewable area to get the look you want. you would use a combination of background-size and background-position for this

You will need to ensure that you style the images in your CSS to have an equal width and height. Also want to ensure that you have the background size consistent as well on the images.

I’d just adjust the height with a CSS rule like:

img { max-height: 500px }

Thank for all the help and responses!:grinning: