I have adapted a grid layout tutorial and have it working almost as I want. However, I would like to maintain the aspect ratio of the images as the screen size changes. I can’t see how the usual approach of setting padding-bottom could be used in this instance.
I have a pen here: https://codepen.io/gandalf458/pen/gjBjLG
Hi,
That method applies to an <img> in the html. If you remember it uses absolute positioning on the image and a wrapping div (with the padding) to scale the img.
Your codepen is setting the images as background-images and it’s using background-size:cover on the li.
.boxes li {
background-size: cover;
display: flex;
align-items: flex-end;
}
If the images are indeed part of the pages content they should be moved to the html as an <img>
I’m not too familiar with grid yet but you may be able to use object-fit to handle the scaling on the img in that case.
Hi Ray
You’re right, of course. The images are part of the content so yes they should not be background images. That should make adding the overlay a bit more tricky.
I will make a new pen, I think…
Hi gandalf,
I went ahead and played around with object-fit on the images, I was curious about it too.
My layout uses flexbox but you may be able to merge the concept into grid.
I found it awkward to work with object-fit while the images have the size attributes on them in the html. Come to find out, that is what the object-position property is for. But when going that route it makes the <img> element a container like a div then positions the rendered image within the remaining space.
Other examples I found would set a fixed height on the image in the css and I didn’t really like that either because it seemed to interfere with aspect scaling.
Regardless, it seemed to cause alignment problems for me when I tried to use the size attributes along with the caption text.
I wound up using absolute positioning for the captions so they laid on top the images.
Here’s a codepen link.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox & Object-Fit Image Captions</title>
<style>
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-end;
}
.caption {
display: flex;
flex: 1 1;
min-width: 250px;
max-width: 550px;
flex-flow: column;
margin: .5em;
position: relative;
}
.caption * {
box-sizing: border-box;
}
.caption img {
min-height: 125px; /*helps hold img open for caption text while image loads with missing size attributes*/
width: 100%;
/*height: auto; /*was used with size attributes on images*/
object-fit: contain;
object-position: top center; /*was used with size attributes on images*/
border: 1px solid;
border-radius: .5em;
}
.caption div {
position: absolute;
bottom: .5em;
left: .5em;
right: .5em;
}
.caption h2 {
font-size: 1.25em;
margin: 0;
}
.caption p {
font-size: .95em;
margin: 0;
}
h1 {
text-align: center;
}
@media all and (max-width: 500px) {
.container {
flex-flow: column;
}
}
</style>
</head>
<body>
<h1>Flexbox & Object-Fit Image Captions</h1>
<div class="container">
<div class="caption">
<img src="http://via.placeholder.com/450x250" alt="missing image">
<div>
<h2>Caption Title</h2>
<p>Caption text that provides image info</p>
</div>
</div>
<div class="caption">
<img src="http://via.placeholder.com/550x350" alt="missing image">
<div>
<h2>Caption Title</h2>
<p>Caption text that provides image info</p>
</div>
</div>
<div class="caption">
<img src="http://via.placeholder.com/450x250" alt="missing image">
<div>
<h2>Caption Title</h2>
<p>Caption text that provides image info</p>
</div>
</div>
<div class="caption">
<img src="http://via.placeholder.com/550x350" alt="missing image">
<div>
<h2>Caption Title</h2>
<p>Caption text that provides image info</p>
</div>
</div>
<div class="caption">
<img src="http://via.placeholder.com/450x250" alt="missing image">
<div>
<h2>Caption Title</h2>
<p>Caption text that provides image info</p>
</div>
</div>
<div class="caption">
<img src="http://via.placeholder.com/550x350" alt="missing image">
<div>
<h2>Caption Title</h2>
<p>Caption text that provides image info</p>
</div>
</div>
<div class="caption">
<img src="http://via.placeholder.com/450x250" alt="missing image">
<div>
<h2>Caption Title</h2>
<p>Caption text that provides image info</p>
</div>
</div>
<div class="caption">
<img src="http://via.placeholder.com/550x350" alt="missing image">
<div>
<h2>Caption Title</h2>
<p>Caption text that provides image info</p>
</div>
</div>
</div>
</body>
</html>
Cool. Thanks, Ray
I shall play around with that when I wake up!
It’s amazing that you can type while asleep. I’m impressed 
You’d be surprised what a wizard does in his sleep!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.