Brug display: contents på <p>-elementer, der indeholder et billede, så det ikke bliver begrænset af tekstens maksimum bredde.
<article>
<header>
<h2>Image breakout</h2>
<p>Using has() and display: contents</p>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ratione earum reprehenderit delectus illum aut id porro architecto ut ipsam facere vero praesentium minus ipsa necessitatibus natus unde consectetur provident.</p>
<p>
<img src='https://images.unsplash.com/photo-1691094552409-a8377d99c7cb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTQ3NTYzMTR8&ixlib=rb-4.0.3&q=85' alt=''>
</p>
<p>Eligendi sint possimus porro quasi rem debitis! Dolorum, nostrum omnis a totam earum placeat inventore libero reprehenderit exercitationem cum alias fuga sit, cumque, commodi nam nobis sint et ratione. Harum!</p>
<footer>
<small>Written by someone</small>
</footer>
</article>
Using has() and display: contents
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ratione earum reprehenderit delectus illum aut id porro architecto ut ipsam facere vero praesentium minus ipsa necessitatibus natus unde consectetur provident.
Eligendi sint possimus porro quasi rem debitis! Dolorum, nostrum omnis a totam earum placeat inventore libero reprehenderit exercitationem cum alias fuga sit, cumque, commodi nam nobis sint et ratione. Harum!