显示保持纵横比的照片答案

【问题标题】：Display photos keeping the aspect ratio显示保持纵横比的照片
【发布时间】：2014-02-21 05:07:30
【问题描述】：

我想在不改变纵横比的情况下以固定大小显示图像。

我想以这种尺寸200px * 200px 显示图像，同时保持原始纵横比。这里所有图片都大于200px * 200px。

我想从中心裁剪图像并将宽度和高度设置为 200px，而不改变纵横比，这意味着我们只想显示图像的一部分。

谁能告诉我如何实现它？我尝试过使用 max-width 和 max-height 的 CSS，但似乎 CSS 无济于事。

我使用 PHP 作为服务器端语言。听说有人推荐GD。有什么想法吗？

【问题讨论】：

只是谷歌“php裁剪图像”
类似this 的东西？ （这意味着我们只想显示图像的一部分。）
@PranavKapoor 是的，更近了！有没有更好的方法从中心显示它？
@PranavKapoor 我喜欢这个。正是我需要的！谢谢！

标签： php html css image

【解决方案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

【讨论】：