爲什麼我的HTML在我的HTML/CSS表中大小不正確？

Question

我已在我的div sectionPhotographer內創建了一個表格，以正確地分隔我的內容。我已對錶格進行了設置，以便每個td填充div sectionPhotographer的50％。我想將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>