縮放圖片

我在350px x 350px大的div內顯示圖片。人們可以將圖片上傳到我的文件服務器，並且該圖片的目的地鏈接是在數據庫中創建的，也是一個ID。獲取鏈接的php文檔位於根文件夾中，所有圖片保存在名爲圖片的子文件夾中。我顯示了使用這樣的畫面：縮放圖片

$piclink = "SELECT `link` FROM `pictures` WHERE `id=`.$id.`";

的$id變量點擊從以前的頁面的鏈接時被存儲。

我的問題：並非所有的圖片都是相同的格式。我想要顯示它們，以便尺寸爲350px，其他尺寸按比例。我該怎麼做呢？簡單地做到這一點：

echo "<img href=" . $piclink . " height='350px' width='350px'/>"

將拉伸圖片到350x350從而破壞比例。任何幫助讚賞。

來源

2013-03-15 Simon Carlson

有一個咕問題d回答這個... – Popnoodles 2013-03-15 00:43:50

popnoodles，你是指http://stackoverflow.com/questions/2076284/scaling-images-proportionally-in-css-with-max-width？ – zamnuts 2013-03-15 00:45:02

不，可以使用CSS – Popnoodles 2013-03-15 00:45:47

要保留寬高比，您可以檢索圖像尺寸並使用350px的最大值應用比率。

下面是一個例子：

HTML

<div id="img-holder"></div>

代碼

var img = new Image(); 
img.onload = function() { 
    alert('Orignal width:'+img.width+', height:'+img.height); 
    var width, height; 
    if (img.width > img.height) { 
     width = (img.width > 350 ? 350 : img.width); 
     height = img.height * (350/img.width); 
    } else { 
     height = (img.height > 350 ? 350 : img.height); 
     width = img.width * (350/img.height); 
    } 
    img.width=width; 
    img.height=height; 
    $("#img-holder").append(img); 
} 
img.src = "http://mps.thebeautyquotient.com/images/val4a.jpeg"

這裏的的jsfiddle：http://jsfiddle.net/aN6Ec/

來源

2013-03-15 01:45:02

回答

相關問題