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

Question

我有一个固定的宽度和高度容器，我正在尝试填充图像和一些文本。 我想先“绘制”文本，然后让图像适合容器的 rest。 这是我所追求的图像：

示例图像图像

似乎这应该可以工作，但是图像不尊重其所在行的高度：

 .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

有两种选择，见下文。 我猜您的文字溢出了，因为您将文字的高度设置为 40px，而不是插入长文字。 还要检查object-position - nice 属性来管理您想要查看的图片部分是否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

我终于能够弄清楚了！ 看起来您需要将图像包装在 div 中并确保指定overflow:hidden 。 出于某种原因，这将确保图像被缩小，而不仅仅是放大以适应父级。

 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>