调整图像大小并在Wordpress上填充背景

Question

我有各种尺寸的图像。我还有各种容器来放置这些图像。

示例：我有680 x 1024图像，将放置在500x500容器上而不进行裁剪。

所以我认为我需要使用容器大小来构建图像，而不是将调整大小的图像放在它上面。

我预期的结果是这样的

或者

如何在PHP或wordpress上实现这一目标的最佳方式？

Answer 1

我写了一个插件，目前在WordPress插件库：

  

JResizr

     

此插件能够覆盖默认的worpdress行为并禁用裁剪图像，但尝试调整图像大小以适应矩形容器大小并使用背景颜色填充空间。您还可以选择要使用的背景颜色。

Answer 2

在您拥有<img>标记的html中，添加width属性，并将其设置为100%，应自动将图片调整为其容器大小<​​/ p>

<img src="imageNamw.jpg" alt="imageAlt" width="100%" />

Answer 3

您可以编写一个可以实现此目的的简单Js文件。

我之前做过这样的事情;所以基本上你比较它的容器中图像的高度和宽度。然后，如果高度超过宽度，则将高度设置为500px并将宽度设置为auto;

否则如果宽度超过高度，则将宽度设置为500px，将高度设置为自动;

否则你将宽度和高度设置为500px;

将容器垂直对齐设置为中间，将文本对齐设置为css中心，这应该可以解决问题;

Answer 4

您还可以尝试使用简单的timthumb库来调整任意大小的图像。

请在此处查看timthumb库代码：

http://timthumb.googlecode.com/svn/trunk/timthumb.php

Answer 5

有几种方法可以实现这一目标。 javascript / php的一个替代方案，如果图像大小合适，只需使用CSS，特别是background-size: contain

  

<强>包含

     

此关键字指定应将背景图像缩放到尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。

您可以在http://jsfiddle.net/RxTLS/

进行试验

请记住，这主要是受支持的，尽管IE8及以下版本不支持。如果你担心IE用户，我相信我们会有一些polyfills。

此解决方案仅适用于您上传的图像接近其显示尺寸的情况。不建议尝试使用超过3000像素宽/高的图像执行此操作，原因有多种。

在这种情况下，您首先要在PHP中缩小它们。如果您通过Wordpress上传图片，则可以在functions.php中使用add_image_size，并在上传图片时自动调整图片大小。或者，您也可以在PHP中手动执行此操作，并且有很多关于如何在那里执行此操作的教程。我只是谷歌PHP image resize。

Answer 6

在WordPress中，只需使用他们的image_resize函数

即可

image_resize( $file, $max_w, $max_h, $crop, $suffix, $dest_path, $jpeg_quality );

您可以在其中设置文件，容器的宽度，容器的高度和false（因为您要调整大小，而不是裁剪）。其他是可选的，如果您对新文件目的地或名称或质量有特殊需求，则应填写它们。如果您正确输入了所有内容，则该函数应返回新调整大小的图像的路径。

请注意，使用WordPress，您可以在上传图片时自动执行此操作，以便稍后您只需检索已调整大小的图片 - 查看add_image_size功能。