Question

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

我可以使用哪些代码将照片裁剪成方形？

这是我目前用它来裁剪的：

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

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

Answer 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 Only解决方案

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

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

如果您将图片用作背景并指定背景属性＆＃39; cover＆＃39;然后它将自动缩放以确保完全覆盖。

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

1 个答案: