HTML和CSS中的自动裁剪填充答案

【问题标题】：Automatic crop filling in HTML & CSSHTML和CSS中的自动裁剪填充
【发布时间】：2014-09-10 19:37:01
【问题描述】：

我正在开发一个 Tumblr 博客，其中的照片被裁剪成一个正方形。当照片是纵向而不是横向时，效果会起作用。相反，照片完全显示为风景。看看http://hugowolfdesigns.tumblr.com/ 看看我的意思（第一和第二张照片显示了我不想要的东西；第三张照片显示了我想要达到的效果）。

我可以使用什么代码将照片一直裁剪成方形？

这是我目前用来裁剪的：

<div id = "photo">
<a href="{permalink}"><img class = "default" img src="{PhotoURL-500}" width="250"/></a>
</div>

但是，如果我只使用 height="250"，它只会拉伸照片，而不是裁剪它。

【问题讨论】：

如果可以，将每张图片设置为背景。然后你可以使用background-position: center;
这似乎不适合我。

标签： html css tumblr crop

【解决方案1】：

您需要根据图像是横向还是纵向图像来为图像分配宽度或高度。在这种情况下，我将控制 CSS 中的宽度/高度，而不是内联。我还会使用 jQuery 将正确的类分配给正确的图像类型。

例如http://jsfiddle.net/xukcc3sv/

CSS

img.portrait, img.square {
    width: 100px;
}
img.landscape {
    height: 100px;
}

jQuery

// I've added a callback within the addClass function to prevent multiple use.

$('img').addClass(function () {
    if (this.height === this.width) {
        return 'square';
    } else if (this.height > this.width) {
        return 'portrait';
    } else {
        return 'landscape';
    }
});

这是一个使用纵向图像和横向图像的快速示例。

纯 CSS 解决方案

例如http://jsfiddle.net/xukcc3sv/1/

div {
    width: 100px;
    height: 100px;
    display: block;
    background-image: url('image.jpg');
    background-repeat:no-repeat;
    background-size:cover;
}

如果您使用图像作为背景并指定背景属性“cover”，那么它将自动缩放以确保完全覆盖。

【讨论】：