2014-10-04 42 views
0

我遇到了一个我正在构建的包含图库页面的网站的问题。他们需要的布局是每行有不同数量的图像(最多4个或更少),并且所有这些图像都适合容器元素的整个宽度(对于这种情况,我将使用1100px),但所有相同的高度和宽高比,并且不裁剪图像。PHP - 调整图像的行大小以适应固定大小的容器而不裁剪它们

这里是我的意思的例子(彩色方块代表图像): http://imgur.com/BdokhwE

我会很感激与创建这可能需要4个给出图像尺寸的PHP函数的任何帮助,计算每个图像的宽度和高度值,以使它们能够贴合在容器中,我可以使用一些内联CSS。

我可以管理获取图像尺寸和应用内联css,但是我很难理解我需要执行的计算以真正计算出它们各自的尺寸应该是什么。

非常感谢!

回答

0

您可以使用HTML样式元素。

<img src="..." style="max-height:1100px" /> 这会使它们变成所有的高度,并且纵横比将与大版本保持一致,但是如果不修剪,可能无法制作4 /行。

+0

如果你在一个5000x5000的图像上运行它,你根本不会节省带宽......但它的一个解决方案。 – 2014-10-04 02:02:08

+0

感谢您的回答,但我不认为这是独自一人可以解决的问题。 下面是一个网站,其中包含我之后的布局:https:// paddle8。com/work/aime-jules-dalou/39388-moissonneur-affutant-sa-faux-reaper-sharpening-his-scythe(向下滚动页面,你会明白我的意思) – 2014-10-04 02:15:25

+0

@IngwiePhoenix你绝对正确,我知道这一点,因为我目前正在为一位艺术家制作一些东西,这些艺术家给我的照片是5000x5000 – user3648062 2014-10-04 02:23:27

0

如果你不介意花费一些代码,然后看看在这里: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写一个实现,这应该是你的任务,因为我不知道你工作的格式和类似的东西。但是从手册页给出的那个应该可以帮助你在那里开始。

这个想法来自缓存。你基本上是缓存调整后的版本,保留它们在文件系统上,并重用它们。有效减少发送的数据量。

希望它有帮助。 :)

+0

感谢您的回复!不幸的是,这是resizeimage函数的作用,或者说是确定这些尺寸应该是什么,而我坚持不懈。我可能也可以更好地解释这个问题,但问题本身并不是要调整过大的图像(他们不太可能是那么大,而且我可以为此设置保护措施),更重要的是解决什么问题他们应该是这样的大小,以便它们完全适合从边到边的一条线,并且都具有相同的高度 – 2014-10-04 02:28:27