CSSイメージのサイズ変更と空白のボトムエリア

Question

これまでの記事では、500x500 imageをどのように表示できるのかを質問していましたが、imageはx axisではなく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%; 
} 

私はborderを使用して画像の境界線を少し良くしています。どのように私はこのように空白底面積を修正することはできません

：私はこれをテストし、私はx axisに向けてのサイズを変更すると、それは確かにリサイズだという事実を除いて正常に動作しますが、それは下部の空白領域を与えます表示される、境界線は常にイメージに合う？ Ty

Answer 1

コンテナの幅が500pxでないため、アスペクト比を維持するために背景イメージの高さが低くなっています。

.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が応答します：あなたは完全に<div>を埋めたい場合は、次のように、background-size: coverを使用できますか？ここに私のソリューションです： 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; 
}