html - 将垂直较大的图像保留在较小的、大小定义的 div 内而不会溢出

Question

如果我有一个高度为 482 像素的 IMG，但我只希望第一个/前 200 个像素（不调整图像大小）出现在 div 中，我将如何实现这一点？现在所有 482 像素都在显示，它悬垂在 div 标签上。

.slideshow { width: 1080px; height: 200px; margin: auto }

<div class="slideshow">
  <img src="https://www.gravatar.com/avatar/dc8abc1d06f8fc5f2e8640379ccb4742?s=328&d=identicon&r=PG" width="1080" height="482" />
</div>

Answer 1

您需要添加溢出规则。

.slideshow { width: 1080px; height: 200px; margin: auto
    overflow: hidden;
}

这将隐藏任何不适合容器的内容。