画像がコンテナの高さを超えていない

Question

画像を格納する親コンテナproject-img-mainがあります。次に、高さをautoに設定して、幅に対する正しい比率に合わせます。あなたがイメージの下を見ると、小さなギャップがあります。私はそれを引き起こしているのか分かりません。このスニペットに表示されているすべてのコンテナにmargin: 0を追加しました。私はまた、max-height: 700pxをminとheightに変更しました...何も機能していません。

これを引き起こしている原因は誰にも見えますか？

#project-img-main { 
 
\t position: relative; 
 
\t margin: 0; 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 
#project-img-window { 
 
\t max-height: 700px; 
 
\t width: 60%; 
 
} 
 
#project-img-text-container { 
 
\t background: rgba(0,0,0,.7); 
 
\t position: absolute; 
 
\t width: 40%; 
 
\t height: 100%; 
 
\t left: 60%; 
 
\t z-index: 99; 
 
\t top: 0; 
 
} 
 
#project-img-text-block { 
 
\t text-align: center; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t -webkit-transform: translate(-50%, -50%); 
 
\t transform: translate(-50%, -50%); 
 
} 
 

 

 
#blue { 
 
    background: blue; 
 
    height: 300px; 
 
    width: 100%; 
 
    }

<div id="project-img-main"> 
 
\t <img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects"> 
 
\t \t \t <div id="project-img-text-container"> 
 
\t \t \t \t <div id="project-img-text-block"> 
 
\t \t \t \t </div> \t 
 
\t \t \t </div> 
 
\t </div> 
 
<div id="blue"></div>

Answer 1

下のスペースは、imgタグと次のdivタグの後に改行やスペースのアーティファクトであるIMGタグに（あなたの#project-img-window）

Answer 2

をdisplay: blockを追加します。これは、img要素がインラインブロックであるためです。最も簡単で簡単な解決策は、それを次のように表示するように設定することです。

#project-img-window { 
    max-height: 700px; 
    width: 60%; 
    display: block; 
}