是否可以将图像置于隐藏溢出的包装内？

Question

我需要我的缩略图来填充 100x100px 容器的 space。但是我有一些风景图像，我想将它们居中放置，这样它们的左右两侧就会被裁剪掉。不使用背景图片能实现吗

这是我目前的情况：

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

如果您将宽度从 width: auto 调整为 width: 100px，图像会调整大小以适合缩略图。如果这就是你想要的。

Answer 2

如果不介意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/

Answer 3

您的人像图片是始终保持相同大小，还是宽度可变？如果它们大小相同，您可以这样做：

http://codepen.io/tinyglowstudio/pen/ojNVGj?editors=110

HTML:

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97100&w=300&h=100" alt="" />

我为了自己的数学把它改成了 300 和 100。你可以自己做代数:)

CSS:

img
    position: absolute;
    width: auto;
    height: 100px;
    z-index: 0;
    clip: rect(0px 200px auto 100px);
    transform: translate(-100px);

这适用于 IE

Answer 4

好的，这是一个新的答案，使用 JS 来设置我们的裁剪量：

http://codepen.io/tinyglowstudio/pen/ojNVGj?editors=111

HTML:

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=450%C3%97250&w=450&h=250" alt="" />

CSS:

img
    position: absolute;
    width: auto;
    height: 100px;
    z-index: 0;

JS

$(".thumbnail img").each(function() {
   var Height = 100 / $(this).height();
   var Width = $(this).width() * (100 / $(this).height());
   var trimAmount = (Width - 100) / 2;
   $(this).css({
       'transform' : 'translate(-' + trimAmount + 'px, 0)', 
       'clip' : 'rect(0 ' + (100 + trimAmount) + 'px 100px ' + trimAmount + 'px)'});
});

是否可以将图像置于隐藏溢出的包装内？

Is it possible to center an image inside a wrapper with an overflow hidden?

css

image

centering