CSS比例和方形中心裁剪图像

Question

所以我的应用程序中有一组缩略图,大小为200x200.有时原始图像没有这个比例,所以我打算将这个图像裁剪成正方形.

目前它只是拉伸图像以适应缩略图,所以说我的原始图像大小是400x800,然后图像看起来非常挤压.我想剪裁这个图像,使它看到最短的宽度/高度,然后将其裁剪成正方形,所以在上面的例子中,它将裁剪为400x400.

有没有办法通过CSS轻松做到这一点,还是我必须使用某种JS来做到这一点？

Answer 1

如果使用背景图像,可以在CSS中轻松完成此操作.

.thumb {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 5px;
    border: 3px solid #c99;
    background-position: center center;
    background-size: cover;
}

在这个小提琴中,第一张图片是400x800,第二张图片是800x400:

http://jsfiddle.net/samliew/tx7sf

Answer 2

更新以处理图像宽度大于高度的情况.

你可以用纯CSS做到这一点.将每个图像的容器元素设置为具有固定的高度和宽度overflow: hidden.然后将图像设置为min-width: 100%,min-height: 100%.任何额外的高度或宽度都会溢出容器并被隐藏.

HTML

<div class="thumb">
    <img src="http://lorempixel.com/400/800" alt="" />
</div>

CSS

.thumb {
    display: block;
    overflow: hidden;
    height: 200px;
    width: 200px;
}

.thumb img {
    display: block; /* Otherwise it keeps some space around baseline */
    min-width: 100%;    /* Scale up to fill container width */
    min-height: 100%;   /* Scale up to fill container height */
    -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
}

看看http://jsfiddle.net/thefrontender/XZP9U/5/