2014-10-04 41 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