使用 css 网格在固定高度行中拟合图像

Question

I have a fixed width and height container which I'm trying to fill an image and some text. I'd like to have the text "drawn" first then have the image fit in the rest of the container. Here's an image of what I'm after:

Example Image Image

Seems like this should work however the image doesn't respect the height of the row its in:

 .container { width: 500px; height: 300px; background-color: green; display: grid; grid-template-rows: 1fr auto; gap: 40px; } img { object-fit: contain; width: 100%; background-color: red; } span { background-color: blue; }

 <a href='somelink' class="container"> <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" alt=""> <span>Test</span> </a>

Answer 1

There are two options, see below. I guess your text overflowed, because you set the height of text 40px and than inserted long text. Check also object-position - nice property to manage the part of picture you want to see if object-fit: cover;

 .container { width: 500px; height: 300px; background-color: green; display: grid; grid-template-rows: 1fr auto; gap: 40px; } img { object-fit: contain; width: 100%; height: 100%; background-color: red; } span { background-color: blue; }

 <a href='somelink' class="container"> <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" alt=""> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pretium lectus id turpis. Nulla est. Maecenas sollicitudin. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Pellentesque pretium lectus id turpis. Nullam faucibus mi quis velit. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Aliquam id dolor. Sed ac dolor sit amet purus malesuada congue. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. </span> </a>

 .container { width: 500px; height: 300px; display: grid; grid-template-rows: 1fr auto; background-color: limegreen; gap: 20px; } img { width: 100%; height: 100%; background-color: red; object-fit: cover; object-position: right top; } span { background-color: blue; color: white; text-align: center; }

 <div class="container"> <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" alt=""> <span>Some text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pretium lectus id turpis. Nulla est. Maecenas sollicitudin. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Pellentesque pretium lectus id turpis. Nullam faucibus mi quis velit. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Aliquam id dolor. Sed ac dolor sit amet purus malesuada congue. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. </span> </div>

Answer 2

I was finally able to figure it out! Looks like you need to wrap the image in a div AND be sure to specify overflow:hidden . For some reason, that will ensure that the image gets resized down and isn't just scaling up to fit within the parent.

 body { display: flex; flex-direction: column; align-items: stretch; min-height: 100vh; margin: 0; }.container { width: 500px; height: 300px; background-color: green; display: grid; grid-template-rows: 1fr auto; gap: 40px; }.image-container { overflow: hidden; display: flex; justify-content: center; background-color: red; } img { display: flex; flex: 0 1 auto; object-fit: contain; background-color: red; } span { background-color: blue; color: white; }

 <a href='somelink' class="container"> <div class="image-container"> <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" alt=""> </div> <span>Test</span> </a>