html - CSS object-fit 拉伸图像

Question

我有一个指向图像的常规img标签src

在大/高图像上，object-fit 正在拉伸图像，而不是按应有的方式显示它们。

使用 contains 可以解决问题，但这不是预期的效果。

我这边有没有配置错误？或者这里有一个css问题？如果有人知道解决方案，我将不胜感激。

的HTML：

 <div class="container">
  <div>
   <img src="image-url" class="image" >
   <div>
    <h2>title</h2>
    <p>description</p>
   </div>
  </div>
 </div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  margin: 20px 0;
}

.image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

标签： htmlcss