css - 是否可以将图像置于 overflow hidden 的包装内？

Question

我需要我的缩略图来填充 100x100 像素的容器空间。但是我有一些风景图像，我想将它们居中放置，这样它们的左右两侧就会被裁剪掉。是否可以在不使用背景图像的情况下实现这一目标。

这是我目前所拥有的:

HTML

<div class="outer">
    <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" />
    </div>
</div>

CSS

.outer {
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid grey
}

.thumbnail {
  overflow: hidden
}

img {
  width: auto;
  height: 100px;
}

http://codepen.io/ingvi/pen/JYjBNP?editors=110

Answer 1

如果您不介意 IE 支持，您可以使用 object-fit: cover; 属性。

CSS:

.outer {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid grey;
}
.thumbnail {
    overflow: hidden;
}
img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

html:

<div class="outer">
        <div class="thumbnail">
                <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" />
        </div>
</div>

演示:https://jsfiddle.net/d0wvvdf8/1/