Pourquoi mon img est-il mal dimensionné dans ma table HTML/CSS?

Question

J'ai créé une table dans mon div sectionPhotographer pour bien espacer mon contenu. J'ai dénommé la table afin que chaque td remplisse 50% du div sectionPhotographer. Je voudrais placer un img dans une des cellules, cependant, l'img ne se mesure pas comme je le voudrais.

.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>

Quand je mets la hauteur de img-100%, je pense qu'elle doit remplir le td c'est. Cependant, il tailles il trop grand. Des idées sur la raison pour laquelle cela se produit?

Answer 1

vous devez ajouter largeur: 100% comme ceci:

.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>