2-column profile/infobox
I used to use this on character profiles. It's a bog-standard 2-column box, but CSS magic allows us to force the image to take up the entire container height regardless of screen width, which I think is nifty. You can resize your screen to see how it works. It also makes use of the background-size property to keep the image cropping looking good across screen sizes, although you still might have to experiment a little.
The code provided is extremely skeletal. You can mess with widths and heights to get it looking nice. The justify and label classes are just there as cute base styling if you want to use the box for profiles, but you can delete or mutilate them as desired. If you want to use the box to house more text, you should fix the height of the box to match your image, then use overflow:auto on the box with text in it.
Demo
Profile box demo
Demo with more text
Since the earliest records of Kjerag's history, Gnosis's family—the Edelweisses—were keepers of precious documents and ancestry records for the whole region. Thus, the whole family's calling from generation to generation was to protect, write, and manage these records. Gnosis's obsession with research comes from these ancestral duties.
It could be said Gnosis serves as an ideal researcher.
He has next to no desires, and has practically no interest in anything outside of research. He possesses the proactiveness and competence to transform his ideas into reality, electing to personally lead teams to obtain any necessary materials or tools that cannot be found at Rhodes Island. And once he concentrates on his research, he becomes a precise instrument—in the several experiments he's taken part in, he's never once made the slightest mistake.
Code
HTML:
<div class="box">
<div class="box-right">
</div>
<div id="box-left">
<!-- Delete/ignore if you don't need the profile labels -->
<div class="justify"><span class="label">Label</span>
<span>Content</span></div>
</div>CSS:
.box {
display:grid;
grid-template-columns:1fr 2fr;
grid-gap:5px;
}
.box-right {
background: url(/*Image URL here*/);
background-size:cover;
}
/* Delete/ignore if not using profile labels */
.justify {
padding:0.25rem;
display:flex;
justify-content:space-between!important;
}
.label {
font-weight:bold;
}