Question

我希望在不改变宽高比的情况下以固定尺寸显示图像。

我想以这个尺寸200px * 200px显示图像，同时保持原始宽高比。此处的所有图片都大于200px * 200px。

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

有谁能告诉我如何实现它？我已经尝试过使用max-width和max-height的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

显示保持纵横比的照片

1 个答案: