-1

アスペクト比を変えずに固定サイズで画像を表示したい。

200px * 200px元のアスペクト比を維持したまま、このサイズで画像を表示したいと思います。ここにあるすべての画像は。よりも大きいです200px * 200px。

アスペクト比を変更せずに、画像を中央からトリミングし、幅と高さを200ピクセルに設定したいので、画像の一部のみを表示したいと思います。

誰かがそれを実現する方法を教えてもらえますか？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 に答える