In Markdown images are wrapped inside of paragraphs. I'd like images to be wider than text and fill the container's larger width. How can I solve this? Here is an example: https://sidey.now.sh/2019/08/31/difference-between-font-formats/
Ideally the text would only have a width of 40rem.
You can solve this using CSS grid:
.container {
margin:0 50px;
border:1px solid;
}
.container >p {
display:grid;
grid-template-columns:1fr minmax(0,20rem) 1fr;
}
/* this pseudo element will take the first column and force the text to be on the middle one */
p::before {
content:"";
}
/**/
p > img {
grid-column:1/span 3; /* the image should take all the 3 columns (full width) */
}
img {
max-width:100%;
}<div class="container">
<p>Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</p>
<p><img src="https://images.unsplash.com/photo-1580792214064-6102bf1948d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80" alt="image"></p>
<p>Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</p>
</div>