2010-12-21 48 views
0

AS在臉譜,orkut的應該是輪廓PIC設置高度,寬度等,使圖像清晰,沒有任何失真觀看它時,檔案圖片默認大小

 <img src="image.gif" style="height:75px;width:130px;" /> 

回答

0

爲了避免失真的縮略圖中你應該採取的原始圖像,並使用任何圖像處理程序或技術(PHP,Photoshop中...)你已經可用,調整大小/裁剪圖像不論大小,您認爲合適的:

  1. 原圖profilePicture.png,600 * 500像素,轉換爲:
  2. profilePictureThumbnail.png,200×240像素

然後使用profilePictureThumbnail.png而不是使用img標籤來調整/縮放圖像。

我倒是仍然使用在img標籤heightwidth屬性,因爲這可以讓瀏覽器佈置頁面即使網絡,或圖像服務器,速度慢與實際圖像應對建議。

我肯定會避免使用瀏覽器調整圖像的大小,因爲它仍然要求下載圖片(以其全尺寸/分辨率),並且瀏覽器圖像處理不是特別敏感(並且因Firefox而異Chrome瀏覽器到IE瀏覽器到Opera ...),更不用說移動互聯網軟件包上的人們不會感謝你通過他們的移動資費向他們投擲可能有數兆字節的圖像。

2

他們應該是什麼的圖像的自然尺寸是。

+0

我的問題到底是如何減小尺寸是否有一個標準 – Rajeev 2010-12-21 11:47:00

0

心不是標準尺寸,你應該選擇什麼樣子的最適合您的設計。

我會建議避免在圖像標籤設置固定的大小。您應該將圖像編程調整爲所需的大小。

如果失真是一個問題,你可以按照這個算法中:

  • 識別圖像佔位符的最大可能的寬度和高度與參考設計。
  • 如果用戶上傳的PIC具有高度>寬度,然後調整PIC以匹配佔位符的高度和調整寬度,以保持圖像的比例不變。
  • 如果用戶上傳的PIC具有寬度>高度,調整PIC以匹配佔位符寬度和調整高度,保持比例不變。

這樣你的圖片將永遠適合佔位符,不會有任何失真。

0

試試這個。它應該工作:

<img src="image.gif" style="max-height:75px;width:130px;" />