Question

我在构建包含图库页面的网站时遇到问题。他们需要的布局是每行有不同数量的图像（最多4个或更少），并且所有这些图像都适合容器元素的整个宽度（对于这种情况，我将使用1100px），但所有都有相同的高度和纵横比，以及不裁剪图像。

这是我的意思的一个例子（彩色块代表图像）： http://imgur.com/BdokhwE

我很感激任何帮助创建一个PHP函数，它可以采用4个给定图像的尺寸，并计算每个图像的宽度和高度值，使它们适合贴合容器，我可以应用一些内联css。

我可以管理获取图像尺寸并应用内联css，但我很难理解我需要执行的计算才能真正计算出它们各自的尺寸。

非常感谢！

Answer 1

您可以使用HTML样式元素。

<img src="..." style="max-height:1100px" /> 这将使他们所有的高度，并且纵横比将保持与较大版本相同，但是如果没有裁剪，您可能无法制作4 /行。

Answer 2

如果您不介意花费一些代码，请查看此处：http://php.net/manual/en/function.imagecopyresized.php

使用此功能，会给你一个非常好的结果。以下是伪代码：

<?php
// From the manual
function resizeImage(...) {...}

function getImage($imageName, $width, $height) {
    $dir = dirname($imageName);
    $bImgName = basename($imageName);
    $newName = "{$dir}/{$width}x{$height}.{$bImgName}";
    if(!file_exists($newName)) {
        resizeImage($newName, $width, $height);
    }
    return $newName;
}
?>

然后，在你的HTML ...

<div id="myDiv"> <!-- #myDiv { width: 400px; } -->
    <img src="<?=getImage('img/myCoolPicture.jpeg', 400,400)?>">
</div>

基本上转向

img/myCoolPicture.jpeg

到

img/400x400.myCoolPicture.jpeg

甚至重复使用它！

我没有为resizeImage编写实现，这应该是你的任务，因为我不知道你正在使用什么格式等。但手册页中给出的那个应该可以帮助你开始。

这个想法来自缓存。您基本上是通过将它们保存在文件系统上并重用它们来缓存已调整大小的版本。有效减少发送的数据量。

希望它有所帮助。：）

PHP - 调整一行图像的大小以适合固定大小的容器而不对其进行裁剪

2 个答案: