带有 CSS 网格中的图像的单元格占用太多空间

Question

I'm trying to create a 3 column layout where:

• left and right colums are equal in width
• left colum is empty
• right column contains the image caption (a text of arbitrary length)
• middle column contains an image. Image should have the height of 100% (fill the viewport vertically).
• no layout shifts happen when the image loads (I included width and height attributes on the image).
• I intend to use it with srcset and <picture> (too serve correct image sizes and jpeg/webp). I did not include this in the demo.

Here's my attempt:

 body, figure { padding: 0; margin: 0; } figure { max-width: 100vw; max-height: 100vh; display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr; grid-gap: 1rem; border: 2px solid red; } figure::before { content: 'abc'; } img { height: 100%; width: auto; }

 <figure> <img src="http://placekitten.com/g/400/600" width="400" height="600" alt="cat"> <figcaption>This is a cat</figcaption> </figure>

This is how it looks like (screenshot shows grid tracks from Firefox dev tools):

The issue is this space I painted with red pen over. It makes the grid cell with the image too wide. I want this to look like this:

Here the grid cell is only as wide as it needs to in order to fit the image (preserving aspect ratio). As a result the image is centered horizontally.

How do I do that?

Answer 1

As a general rule, try to avoid making images into grid or flex items. There are still too many bugs in modern browsers that prevent reliable rendering.

I just wrote about this here: How can I get an image to fit to the size of a grid cell?

That said, here's a solution you may find useful:

 body, figure { padding: 0; margin: 0; } figure { display: grid; grid-template-columns: 1fr min-content 1fr; grid-gap: 1rem; height: 100vh; border: 2px solid red; } figure::before { content: 'abc'; } div { min-height: 0; } img { object-fit: cover; height: 100%; vertical-align: bottom; } * { box-sizing: border-box; }

 <figure> <div> <img src="http://placekitten.com/g/400/600" width="400" height="600" alt="cat"> </div> <figcaption>This is a cat</figcaption> </figure>

Answer 2

Considering the fact that the image will be the highest element you can move the max-height:100vh to it and it will be easier:

 body, figure { padding: 0; margin: 0; } figure { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr; grid-gap: 1rem; border: 2px solid red; } figure::before { content: 'abc'; } img { max-height:calc(100vh - 4px); /* considering the border */ width: auto; max-width:100%; }

 <figure> <img src="http://placekitten.com/g/400/600" width="400" height="600" alt="cat"> <figcaption>This is a cat</figcaption> </figure>

Answer 3

try to put justify-content:center in the figure. and the max-width:100% in the img. this is what will center the image horizontally in the figure and makes it to take the full with.

Answer 4

A few changes I would make;)

 * { margin: 0; padding: 0; } html, body { height: 100%; padding: 0; margin: 0; } body { min-height: 100%; padding: 0; } figure { max-width: 100vw; max-height: 100vh; display: grid; height: 100%; grid-template-columns: 1fr minmax(50%, min-content) 1fr; grid-gap: 1rem; border: 2px solid red; } figure::before { content: 'abc'; } img { object-fit: contain; width: 100%; height: 100%; }

 <figure> <img src="http://placekitten.com/g/400/600" width="400" height="600" alt="cat"> <figcaption>This is a cat</figcaption> </figure>