显示保持宽高比的照片

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