如何在不失真的情况下缩放等宽、等高的图像?

时间:2012-12-14 作者:Romes

我的frontpage上有一个部分可以查询最近的帖子,并获取每个帖子的标题和缩略图。在我的功能中。php,我指定了widthheight 对于缩略图,请使用:

add_image_size( \'thumbnail-small\', 179, 147 );
在我的帖子中,所有不同大小的图像都设置为特色图像,当它们被拉入页面上的图像缩略图元素时,它们会按比例裁剪,但不会缩放到正确的大小:

enter image description here

我在图像周围加了边框,这样你就可以看到缩放效果,但Wordpress似乎只是将它们缩放到合适的大小。

我怎样才能让它们看起来都一样,然后用溢出去掉多余的部分:隐藏在CSS中?

我尝试了一些CSS,例如:

// .image-mask is the wrapping div
#middle .image-mask { width:179px; height:147px; overflow: hidden; position:relative; }
#middle img { position:absolute; display: block; top:0; left:0; }
还有。。。

#middle img{ width: auto; max-width: 150px; height: auto; max-height: 100px; }

1 个回复
最合适的回答,由SO网友:Milo 整理而成

如果希望WordPress将图像硬裁剪为这些绝对图像尺寸,可以设置$crop 的参数add_image_size 为true,默认情况下为false:

add_image_size( \'thumbnail-small\', 179, 147, true );

结束