使用 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>