設置圖像大小<img></img>，從數據庫中獲取

我有一個「回聲」，它從我的數據庫中獲取圖像，但是當我上載它時，它會自動將大小更改爲200x113px。我不希望圖片縮放那麼多，我想它是這樣的：設置圖像大小<img></img>，從數據庫中獲取

我想要一個大約500x500px的「盒子」，所以例如當我上傳一張長度超過500px的圖片時，它會縮小到只有500px寬，但保持其比例。

摘要：我想爲圖片設置一個最大尺寸，當我用代碼將它顯示到屏幕上時。它應該適應這種尺寸並保持其比例。

這裏是我的代碼獲取圖像：

{echo "<tr><td colspan='2'><img src='http://xxxx.se/ok/eventbilder/" . $row['photo'] . "'></td></tr>";}

來源

2013-03-12 Marcus

展現你說的是保持縱橫比？ – asprin 2013-03-12 08:08:55

您只想顯示縮放圖像，還是希望在將圖像發送到客戶端之前將圖像縮放到合適的大小？ – 2013-03-12 08:08:57

我看到很多「我想...」 - 有沒有隱藏在那裏的問題？ – 2013-03-12 08:08:58

使用這個CSS：

img { 
    max-width: 500px; 
}

或設置你的TD一width，使圖像的寬度爲100％。確保你只設置高度或寬度，否則圖像不會（自動）保持它的比例。

來源

2013-03-12 08:08:58

謝謝你的回答！這爲我工作。 – Marcus 2013-03-12 08:16:23

這有限制範圍並適用於所有圖像 – 2013-03-12 08:26:31

這是一個例子來說明它如何工作。我不在湯匙飼料業務。 – 2013-03-12 08:28:09

{echo "<tr><td colspan='2' style='width:500px;height:500px;'><img src='http://xxxx.se/ok/eventbilder/" . $row['photo'] . "'></td></tr>";}

來源

2013-03-12 08:13:33

內聯風格，喲！ – 2013-03-12 08:19:10

內聯風格，擰緊比例，哎！ – 2013-03-12 08:28:44

你需要適應縮放：此功能需要你的圖像路徑，並返回$ x和$ y的相應比例。這裏我們假設一個容器盒$ w的高度，寬度和$ H像素的像素

// get size 
    $size = getimagesize($your_image_file_path); 
    $x = $size[0]; 
    $y = $size[1]; 

    // container box 
    $w = 500; 
    $h = 500; 

    $ratio = $x/$y;  

    // resize image 
    if($x > $w) 
    { 
     $x = $w; 
     $y = floor($x/$ratio); 
    } 

    if($y > $h) 
    { 
     $y = $h; 
     $x = floor($y * $ratio); 
    }

來源

2013-03-12 08:16:54

你也可以給一個類來<img>像<img class="dbimg" src="from database"></img>

，並給所有樣式的那類

.dbimg{ 
width:auto; 
max-width:500px; //by only define width it will automatically takes up height as per its proportions 
//other styling 
}

並且使用這種方法的好處是：

1.你可以用任何一個單獨的類使任何img不需要每次都編寫代碼

和

2.you可以使很多組合，如果你有更多的相似圖片，在不同尺寸

來源

2013-03-12 08:24:33

設置圖像大小<img></img>，從數據庫中獲取

回答

相關問題