私のHTML/CSSテーブル内の画像サイズが正しくないのはなぜですか？

Question

コンテンツを正しく配置するためにdiv sectionPhotographerにテーブルを作成しました。私はtdのそれぞれがdiv sectionPhotographerの50％を満たすようにテーブルのスタイルを決めました。私は細胞の1つにimgを置いていきたいと思いますが、imgは私が望むように大きさを決めていません。

.sectionPhotographer { 
 
    height: 90%; 
 
    background: #00aeef; 
 
    overflow: hidden; 
 
} 
 

 
.sectionPhotographer table { 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
.sectionPhotographer td { 
 
    width: 50%; 
 
} 
 

 
.sectionPhotographer img { 
 
    height: 100%; 
 
}

<div class="sectionPhotographer"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <img src="https://lorempixel.com/400/100/"> 
 
     </td> 
 
     <td> 
 
     <h1>Turn your pictures into profits</h1> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

私はimg〜100％の高さを設定すると、私はそれはそれは中だtdを埋めることを期待する。しかし、それはあまりにも大きなサイズ。なぜこれが起こっているのかについてのアイデアはありますか？

Answer 1

あなたは幅を追加する必要があります。このような100％：

.sectionPhotographer { 
 
    height: 90%; 
 
    background: #00aeef; 
 
    overflow: hidden; 
 
} 
 

 
.sectionPhotographer table { 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
.sectionPhotographer td { 
 
    width: 50%; 
 
} 
 

 
.sectionPhotographer img { 
 
    width: 100%; 
 
}

<div class="sectionPhotographer"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <img src="https://lorempixel.com/400/100/"> 
 
     </td> 
 
     <td> 
 
     <h1>Turn your pictures into profits</h1> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>