CSS图像调整大小和空白底部区域

Question

所以，在我之前的帖子中，我问的是如何显示500x500 image，image只能调整x axis而不是y。< / p>

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

我使用border来更好地理解图像的边框。我测试了这个并且工作得很好，除了当我向x axis调整大小时它确实已经调整大小但它在底部给出了一个空白区域：

如何修复此问题，以便不显示空白底部区域，边框是否始终适合图像？ TY

Answer 1

容器的宽度不是500px，因此背景图像的高度会降低以保持其纵横比。如果您想完全填写<div>，可以使用background-size: cover，如下所示：

.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

也许使用img标签并使这个img响应？这是我的解决方案： 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;
}