Bonjour,

J'ai une div avec une image. L'image vient d'une bdd donc ces dimension sont amenées à changer. La hauteur de la div est également amené a changer en fonction du texte (qui vient également d'une bdd).

J'aimerai donc que la hauteur de la div s'adapte au texte, et que l'image s'adapte a la hauteur de la div. Malheuresement ca ne fonctionne pas. Soit je fixe la div (et l'image) mais du coup le texte sort de la div. Soit je ne fixe pas la hauteur de la div, mais l'image du coup la div s'adapte a la hauteur de l'image qui est trop grande

HTML : 

<div class="annonce">
   <div>
       <img src="assets/img/annonces/1_photo1.jpg" class="img-annonce"/>
   </div>
   <div class="info-annonce">
        <h3>Place moto 59800</h3>
        <p>14 Place du Lion d'Or, 59800 Lille, France<br>
        <span class="uk-text-italic">Extérieur</span></p>
        <h2>50€ / mois</h2>
    </div>
</div>

CSS : 

.img-annonce {
    max-height: 100%;
    object-fit: cover;
}

.info-annonce {
    padding: 5px 10px;    
}

.annonce {
    display: grid;
    grid-template-columns: 3fr 8fr;
    /*height: 150px;*/
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

Une idée pour résoudre ca?

Merci

-
Edité par victorberson 15 juin 2021 à 19:54:28

width:100%

et 

height:100%

pour qu'elle prenne la taille de la div