web-dev-qa-db-ja.com

歪まない範囲に収まるようにCSSイメージをスケーリング

CSSを使用する方法や、画像を領域内に収める方法はありますか。サイズの異なる複数の画像があり、それらをすべて150px x 100pxのdiv内に収めたいとしましょう。画像のサイズを変更したくありませんが、一部は背が高く、他は狭くなる可能性があるため、残りを非表示にしてこの領域に収まるようにします。

overflow:hiddenしかし、IE6では隠されていないようです。

何か案は？

cssoverflowscaledistortion
26
Robin Knight

これを使用してみてください：

img{
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 100px;
}

編集：IE6はmax-widthおよびmax-heightプロパティをサポートしていないようです。ただし、ここに示す回避策を実装できます： IE6の最大幅、最大高さ

抜粋（リンクされた記事が機能しなくなった場合）：

img {
  max-height: 100px;
  max-width: 100px;
  width: expression(document.body.clientWidth > 150? “150px”: “auto”);
  height: expression(document.body.clientHeight > 100? “100px”: “auto”);
}
35
Sang Suantak

残りを非表示にして「この領域内に収まる」と言うと、画像をまったく縮小せず、基本的に余分な部分を切り取ってほしいと思います。

私はあなたが間違っていると解釈しているかもしれませんが、これを試して、それがあなたが探している効果を生み出すかどうか確かめてください。

.img-holder {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}
.img-holder img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}
<div class="img-holder">
  <img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" />
</div>
11
Jimmy Cleveland

これはIE6では動作しません（OPの要求どおり）が、完全を期すために、CSS3のbackground-size:coverおよび画像を中央の背景画像として設定します。そのようです：

div { 
  width:150px;
  height:100px;
  background-size:cover; 
  background-position:center center; 
  background-repeat:no-repeat; 
  background-image:url('somepic.jpg');
}
11
Dan

これは私のために働いた：

img.perfect-fit {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}

コンテナの「完全なフィット」を試み、画像の割合を維持しながら境界に合うように自身を引き伸ばします。 IE6でテストしていません。

JSFiddle：http://jsfiddle.net/4zudggou/

5
Sheharyar