I'm creating an animated image grid and I'm using background-image as CSS property instead of html tag.
The problem I'm having is that my background images don't scale on window resize. Surrounding DIV does scale in width, but not the image.
I've tried many solutions to get this working, but the problem is that as soon as I remove or change the height of an element, the image disappears.
I think that the following CSS is causing my problems:
body .vertical .horizontal {
width: 100%;
height: 150px;
position: relative;
box-shadow: -1px 1px 0 1px #000000 inset, 0 0 50px rgba(0, 0, 0, 0.5) inset;
overflow: hidden;
text-align: center;
background-repeat: no-repeat;
background-position: center center;
background-size: cover!important;
}
But setting height to auto, messes things up. This is my example on JsFiddle https://jsfiddle.net/ety9gr7L/
All images should be square all the time. If you resize the browser, you'll see my issue.
The expected result is to display full image, keep the aspect ratio, only size it down according to window resizing.