[Solved] Responsive background images perfect squares and do not clip

[ciaociao]

What I need is simple, but I’m striking out.

I need to create three divs that are a perfect responsive square using vws. Inside those div’s I need div’s with a background image that are also perfect squares when you scale your browser.

The catch is that I need the background image to always be a square as well, and resize accordingly so that none of the image is clipped off.

Here’s a fiddle: http://jsfiddle.net/Lm7qd/2/

*** if you resize the fiddle to a smaller scale, you can see the image that is not clipped. But it is clipping at a larger scale.

[Paulie_D]

I think the problem is that, in your example, the .image div is not 100% height of the .image-wrapper div. It only has the height you have assigned with margin/padding.

Why do you have an div inside a div anyway? It seems unnecessary unless there is something I’m missing.

See this: http://jsfiddle.net/VcWB7/5/

[Paulie_D]

However, if you want to do the div in div thing here’s one option.

An absolutely positioned .image div. Of course the actual numbers are’nt flexible but, by default, as we are using vw units…it is responsive.

http://jsfiddle.net/4v3Wx/

[ciaociao]

Thanks Paulie_D!

You are correct, I did not need the div inside of the div. I thought that I needed a parent div to make this work and I’m super appreciative that you provided an option in case I need this in the future. Huge help! Works like a charm.

[connorblikre]

If you use percentage widths, you can also set a padding-bottom on your image div equal to the width of the div. The div will maintain its aspect ratio as you resize.

Like this: http://codepen.io/connorblikre/pen/Blszw

[Author]

Posts