CSS image resize and blank bottom area

So, in my previous post I was asking how I can diplay a 500×500 image, with that image to only be resized towards the x axis and not y.

.image { 
    border: 1px solid blue;
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    width: auto;
    height: 500px;
    max-width: 100%;
}

I use border to understand a bit better the borders of the image. I tested this and works fine except for the fact that when I resize it towards the x axis it’s indeed resized but it gives a blank area at the bottom:

How can I fix this so no blank bottom area appears, the border to fit always the image? Ty



The width of your container is not 500px, so therefore the background image is being reduced in height to maintain its aspect ratio. If you would like to entirely fill the <div>, you can use background-size: cover, as follows:

Perhaps use img tag and make this img responsive? here is my solution:
https://jsfiddle.net/7rwp5jf4/
Html:

<div>
 <img src="http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg">
</div>

Css:

DIV { 
    border: 1px solid blue;
    width: auto;
    height: 500px;
    max-width: 100%;
}
div img{
    width:100%;
    height:auto;
}