2

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

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

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

我期望的结果是这样的 http://farm9.staticflickr.com/8033/8016052351_bf726f5e43_z.jpg

或这个

http://farm9.staticflickr.com/8459/8016053956_8616f8b1f8_z.jpg

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

4

6 回答 6

7

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

JResizr

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

于 2012-10-29T00:48:53.567 回答
1

有几种方法可以做到这一点。javascript/php 的一种替代方法，如果图像大小大致合适，则只需使用 CSS，特别是background-size: contain

包含

该关键字指定背景图像在确保其尺寸小于或等于背景定位区域的对应尺寸的同时，应尽可能地进行缩放。

您可以在http://jsfiddle.net/RxTLS/上进行试验

请记住，尽管 IE8 及以下版本不支持，但大多数情况下都支持这一点。如果您担心 IE 用户，我相信我们那里有一些 polyfill。

仅当您上传的图像接近它们将显示的大小时，此解决方案才是理想的。出于几个不同的原因，不建议尝试对超过 3000 像素宽/高的图像执行此操作。

在这种情况下，您需要先在 PHP 中缩小它们。如果您通过 Wordpress 上传图片，那么您可以在您的图片中使用add_image_size，functions.php并且在您上传图片时，图片会自动调整大小。或者，您也可以在 PHP 中手动完成，并且有很多关于如何做到这一点的教程。我只是谷歌PHP image resize。

于 2013-07-17T02:34:16.283 回答
1

在您有<img>标签的 html 中，添加一个width属性，并将其设置为100%应该自动将您的图像调整为其容器大小

<img src="imageNamw.jpg" alt="imageAlt" width="100%" />
于 2013-08-14T14:01:11.327 回答
0

您可以编写一个简单的 Js 文件来完成此操作。

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

否则，如果宽度大于高度，则将宽度设置为 500 像素，将高度设置为自动；

否则，您将宽度和高度设置为 500px；

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

于 2013-07-11T13:48:25.387 回答
0

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

请在此处查看 timthumb 库代码：

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

于 2013-07-12T10:26:25.447 回答
-1

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

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

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

请注意，使用 WordPress，您实际上可以在上传图片时自动执行此操作，因此稍后您只需检索已经调整大小的图片 - 看看add_image_size函数。

于 2012-09-24T18:41:41.763 回答