-1

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

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

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

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

我使用 PHP 作为服务器端语言。听说有人推荐GD。有任何想法吗?

4

1 回答 1

2

这应该可以解决问题

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;
}

这是一个演示

于 2012-12-26T14:09:59.967 回答