Question

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

这是我到目前为止所做的：

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/

Answer 2

您的肖像图像是否总是大小相同，还是宽度可变？如果它们的大小相同，您可以这样做：

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 3

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

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)'});
});

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

4 个答案: