CSS图像溢出隐藏而不拉伸答案

【问题标题】：CSS Image overflow hidden without stretchCSS图像溢出隐藏而不拉伸
【发布时间】：2021-09-30 03:23:05
【问题描述】：

我正在尝试在不拉伸图像的情况下减小缩略图的高度。尽管我用 React 编写了我的代码，但我知道它是纯 CSS。

例如，我使用了来自 Wikipedia 的示例屏幕截图，它的高度太大而无法“放入缩略图中”，因此我需要减小它以便 JavaScript 库可以在触发悬停事件时自动滚动它（但这是未来步骤）。

下图是缩略图的样子：

而是显示整个图像，如下所示：

.image {
  width: 200px;
}

.image-link {
  height: 400px;
  overflow: hidden;
}

<a class="image-link" href="#">
  <img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="image" />
</a>

那么，如何在不拉伸或溢出a 的情况下降低图像的高度？

【问题讨论】：

你尝试过 object-fit:cover 吗？
为你整理了:)
@funkysoul，是的，我试过了。它没有用。

标签： javascript html css

【解决方案1】：

将display: block;（或inline-block，视情况而定）添加到a 标记的类中，否则它是一个内联元素，您的height 设置（以及overflow: hidden）在其上获胜'没有任何效果：

.image {
  width: 200px;
}

.image-link {
  display: block;
  height: 400px;
  overflow: hidden;
}

<a class="image-link" href="#">
  <img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="image" />
</a>

【讨论】：

【解决方案2】：

我找到了这个答案： (Overflow: hidden is not working with images)。

您需要添加一个包装器元素，其中包含所有缩放图像作为受overflow 影响的事物。

然后可以根据该包装类调整图像。

.image {
  width:200px;
  height:200px;
  overflow: hidden;
}

.image-link {
  width: 400px;
  
  height:400px;
  background-color:red;
}
.imageScale{
  width:200px;
}

<a class="image-link" href="#">
  <div class="image">
  <img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="imageScale" />
  </div>
</a>

【讨论】：

我猜前面的答案更准确，不需要更多元素。
@Maramal 我的错，我没有看到他们仍然切断了一些图像！