给div背景图片的宽度

Question

So I am making a gallery-page and I am trying to find a way to scale the divs according to the given background-image.

This is what I have so far: http://codepen.io/anon/pen/FzJDy but this is a problematic solution as if the image is too big, it overflows its' parent div. I want to show the full image, so overflow:hidden is not an option.

I know that a way to solve this is by using background-image on a div rather than an img tag. and then do background-size: contain but this is also problematic since (I think) it only works when the parent div has a fixed width and height.

Is there a solution to this if both the div and background-image sizes are unknown?

TL;DR

How to scale a picture to its' parent div if the parent div takes same dimensions as containing image?

thanks.

Answer 1

Remove the following from your .white-content CSS...

max-width: 75%;
max-height: 75%;

Then set your .galleryfullsize CSS to...

.galleryfullsize {
    max-width:100%;
    max-height: 75%;
}