Crop Images and Fill Container Height

[realph]

I’ve got this gallery I’m currently building, and I’m trying to work out how to get my images to fill their containers.

I don’t mind if they’re cropped a little, I just would like them to fill the the full height and width of their parent element .thumb.

I’ve got a demo set up over here: http://codepen.io/realph/pen/hjvBG

If anyone could point me in the right direction, I’d really appreciate it.

Thanks in advance!

[chrisburton]

I think the best approach here is to use something like masonry.js since you have a dynamic width/height for images.

The only other way to do this is to set both width and height to 100% which will distort your images.

[connorblikre]

What if you set the min-height and min-width of your images to 100%? It would crop some of the image if the aspect ratios didn’t match but it would always allow the image to fill its container as long as the container had a set width and height.

[dyr]

If you don’t mind using them as background images then you have access to background-size: cover | contain.

[Author]

Posts