我正在构建的一个包含库页面的网站出现问题。他们需要的布局是每行有可变数量的图像（最多4个或更少），并且所有这些图像都适合容器元素的整个宽度（在这种情况下，我会选择1100px），但都具有相同的高度和纵横比，并且不裁剪图像。
下面是我的意思的一个例子（其中彩色块表示图像）：https://i.stack.imgur.com/oHHMj.jpg
如果您能帮助我创建一个php函数，它可以获取4个给定图像的尺寸，并计算每个图像的宽度和高度值，使它们能够紧密地放入容器中，我将不胜感激，我可以使用一些内联css来应用它。
我可以设法获得图像尺寸并应用内联css，但我对实际计算它们各自的尺寸所需的计算感到困惑。
非常感谢！
您可以使用HTML样式元素。
<img src="..." style="max-height:1100px" />这将使它们都达到那个高度，纵横比将与较大的版本保持不变，但是如果不裁剪，您可能无法制作4/row。
如果你不介意花几行代码，那么看看这里：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编写实现，这应该是你的任务，因为我不知道你在用什么格式之类的东西工作。但手册页上给出的内容应该会帮助您入门。
这个想法来自缓存。您基本上是通过将调整大小的版本保留在文件系统中并重用它们来缓存它们。有效减少发送的数据量。
希望能有所帮助。：）