HTML和CSS中的自动裁剪填充

Posted 2023-02-25

【中文标题】HTML和CSS中的自动裁剪填充

【英文标题】：Automatic crop filling in HTML & 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" /></a>
</div>

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

【问题讨论】：

如果可以，将每张图片设置为背景。然后你可以使用background-position: center;

这似乎不适合我。

【参考方案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”，那么它将自动缩放以确保完全覆盖。