The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Crop Images and Fill Container Height

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #162490

    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:

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

    Thanks in advance!


    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.


    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.


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.