Question

这是一个详细说明我的代码的小提琴：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的顶部？

Answer 1

添加物体位置：顶部中心;到容器img 它会将图像对齐到容器的顶部：）

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

1 个答案: