如果图像超出其容器 div，如何使图像仅在底部溢出（隐藏）？答案

【问题标题】：How do I make an image only overflow (hidden) on the bottom if it exceeds it's container div?如果图像超出其容器 div，如何使图像仅在底部溢出（隐藏）？
【发布时间】：2014-12-19 23:57:53
【问题描述】：

这是一个详细说明我的代码的小提琴：http://jsfiddle.net/naj202uj/

HTML

<!-- Landscape image -->
<div class="container">
    <img src="http://thomaslawnscapes.com/wp-content/uploads/2013/03/chrisweb1.jpg"/>
</div>

<!-- Square image -->
<div class="container">
    <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg"/>
</div>

<!-- Portrait image -->
<div class="container">
    <img src="http://images.sussexpublishers.netdna-cdn.com/article-inline-half/blogs/38/2009/01/3116-76084.jpg"/>
</div>

CSS

.container {
  width: 150px;
  height: 100px;
  overflow: hidden;
  border: black solid 1px;
  margin: 10px;
}
.container img {
  width: 100%;
  object-fit: cover;
  height: 100px;
}

您可以看到 div 中的图像（div 始终是固定的横向大小）不会被拉伸，但溢出是隐藏的。正如您在纵向图像中看到的那样，它在顶部和底部溢出。如何只剪掉底部的图片，将图片的顶部对齐到容器div的顶部？

【问题讨论】：

标签： html css

【解决方案1】：

添加对象位置：顶部中心；到容器 img 它会将图像与容器顶部对齐:)

【讨论】：