CSS image resize and blank bottom area - css

Question

So, in my previous post I was asking how I can diplay a 500x500 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

Answer 1

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:
.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: cover;
width: auto;
height: 500px;
max-width: 100%;
}
<div class="image"></div>

Answer 2

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;
}