使用 css 网格使图像适合固定高度的行

Question

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

Example Image Image

看起来这应该可行，但图像不符合其所在行的高度：

.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 属性来管理你想查看的图片部分 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

我终于想通了！看起来您需要将图像包装在 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>

使用 css 网格使图像适合固定高度的行

Fit an image in a fixed height row with css grid

css

grid

image