顯示保持寬高比的照片

Question

我想要在不改變寬高比的情況下以固定大小顯示圖像。

我想在這個尺寸200px * 200px顯示圖像，同時保持原始的長寬比。這裏的所有圖片都大於200px * 200px。

我想從中心剪裁圖像，並將寬度和高度設置爲200px，而不更改高寬比，這意味着我們只想顯示圖像的某些部分。

誰能告訴我如何實現它？我已經嘗試過使用最大寬度和最大高度的CSS，但似乎CSS無法幫助。

我使用PHP作爲服務器端語言。我聽到有人建議GD。有任何想法嗎？

Answer 1

這應該解決的問題

HTML

<div> 
    <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" /> 
    </div> 

CSS

div { 
    width:200px; 
    height:200px; 
    overflow:hidden; 
    position: relative; 
} 

div > img { 
    width:300px; 
    height:auto; 
    position:absolute; 
    top:-100px; 
    left:-100px; 
} 

這裏是一個DEMO