comment faites-vous img 100% de la hauteur de ses parents

Je travaille sur une page avec beaucoup de texte, et je veux inclure une image. Le problème est que l'img est plus grand que le paragraphe. Est-ce que quelqu'un sait comment je peux faire l'img 100% de son conteneur?comment faites-vous img 100% de la hauteur de ses parents

.container { 
 
    width: 40%; 
 
    margin: 0 auto; 
 
    background: #000000; 
 
    color: #ffffff; 
 
    padding: 5px; 
 
} 
 

 
img { 
 
    float: right; 
 
}

<body> 
 
    <p class="container"> 
 
    <img src="http://via.placeholder.com/200x250"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper interdum risus eget ultrices. Morbi placerat ante nec accumsan tempus. Donec aliquam ex lectus, quis dignissim lacus tempor sit 
 
    amet. Proin varius dui sit amet enim semper, sit amet pharetra metus convallis. Cras at velit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim elit turpis, vel pretium leo rhoncus ac. Nunc 
 
    egestas arcu non nisi volutpat sagittis. Phasellus porttitor sollicitudin tellus, vel egestas nibh ultrices nec. 
 
    </p> 
 
</body>

Source

2017-08-30 Brandon Feder

Pouvez-vous ajouter un plnkr avec votre code existant? –

@ StephenR.Smith s'il vous plaît ne suggère pas seulement d'ajouter un lien vers le code. Tout le code approprié devrait être inclus * dans la question elle-même * –

@Brandon votre problème est le flotteur que vous avez mis sur l'image –

Le problème est que float prend la OTU image du flux standard, de sorte que vous devez mettre en œuvre Clearfix:

1. Créez la classe clearfix en CSS:

Ajoutez le code CSS suivant (Note: cela fonctionne pour IE8 et supérieur.) Si vous avez besoin de supporter les anciens navigateurs, vérifiez le lien ci-dessus).

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

2. Appliquer le clearfix à votre HTML:

Ajouter la classe clearfix à la div qui tient votre image à savoir <p class="container clearfix">

travail Demo:

Note: J'ai la largeur de votre conteneur à 100% de sorte que vous puissiez voir l'effe ct - sinon, dans la petite fenêtre CodeSnippet, le texte n'était pas assez court pour provoquer le problème que vous décrivez.

.container { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background: #000000; 
 
    color: #ffffff; 
 
    padding: 5px; 
 
} 
 

 
img { 
 
    float: right; 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<body> 
 
    <p class="container clearfix"> 
 
    <img src="http://via.placeholder.com/200x250"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper interdum risus eget ultrices. Morbi placerat ante nec accumsan tempus. Donec aliquam ex lectus, quis dignissim lacus tempor sit 
 
    amet. Proin varius dui sit amet enim semper, sit amet pharetra metus convallis. Cras at velit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim elit turpis, vel pretium leo rhoncus ac. Nunc 
 
    egestas arcu non nisi volutpat sagittis. Phasellus porttitor sollicitudin tellus, vel egestas nibh ultrices nec. 
 
    </p> 
 
</body>

Source

2017-08-30 17:47:17 FluffyKitten

comment faites-vous img 100% de la hauteur de ses parents

Répondre

Questions connexes