CSS画像サイズ、どのように塗りつぶすか、ストレッチしないか？

画像があり、特定の幅と高さ（ピクセル単位）に設定したい

しかしwidth:150px; height:100px、css（）を使用して幅と高さを設定すると、画像が引き伸ばされ、見苦しい場合があります。

CSSを使用して画像を特定のサイズに塗りつぶし、拡大しない方法は？

画像の塗りつぶしとストレッチの例：

元の画像：

引き伸ばされた画像：

塗りつぶされた画像：

上記の塗りつぶし画像の例では、画像が150x255（維持されたアスペクト比）にサイズ変更され、次に150x100 にトリミングされることに注意してください。

CSSの背景として画像を使用したい場合は、エレガントなソリューションがあります。coverまたはCSS3プロパティcontainで単に使用しbackground-sizeます。

.container {
  width: 150px;
  height: 100px;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<div class="container"></div>​

一方ではcover、あなたのアップスケーリングされた画像が得られますcontainあなたにダウンスケーリングされた画像が得られます。どちらもピクセル縦横比を保持します。

http://jsfiddle.net/uTHqs/（カバーを使用）

http://jsfiddle.net/HZ2FT/（containを使用）

このアプローチには、Thomas Fuchsのクイックガイドに従って、Retinaディスプレイに友好的であるという利点があります。

両方の属性に対するブラウザのサポートがIE6-8を除外していることに言及する価値があります。

cssプロパティを使用できますobject-fit。

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

こちらの例をご覧ください

IEにはポリフィルがあります：https : //github.com/anselmh/object-fit

充実の@afonsoduarteことによって、上記の回答 （NOT受け入れられた1） 。 ブートストラップ
を使用している場合

1. width:100%スタイルを提供します。
   これは、ブートストラップを使用している場合に役立ちます、を、イメージで使用可能なすべての幅を拡大する。
   

2. heightプロパティの指定はオプションであり、必要に応じて削除または保持できます

   .cover {
      object-fit: cover;
      width: 100%;
      /*height: 300px;  optional, you can remove it, but in my case it was good */
   }

3. ちなみに、heightとwidth属性はimage、スタイルによってオーバーライドされるため、要素にと属性を指定する必要はありません。
   したがって、このようなものを書くだけで十分です。

   <img class="cover" src="url to img ..."  />

実際の唯一の方法は、画像の周りにコンテナを用意して使用することです overflow:hiddenです。

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

CSSで必要なことを実行して画像を中央に配置するのは面倒です。jqueryには次のような迅速な修正があります。

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

CSSソリューション、JSなし、背景画像なし：

方法1「マージンオート」（IE8 +-FFではありません）：

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/

方法2「変換」（IE9 +）：

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/1/

方法2は、固定された幅/高さのコンテナーで画像を中央に配置するために使用できます。どちらもオーバーフローする可能性があり、イメージがコンテナーよりも小さい場合でも、中央に配置されます。

http://jsfiddle.net/5xjr05dt/3/

方法3 "ダブルラッパー"（IE8 +-FFではありません）：

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}

<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/5/

方法4「二重ラッパーAND二重画像」（IE8 +）：

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}

<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/26/

• 方法1の方がサポートが少し優れています-画像の幅または高さを設定する必要があります！
• 接頭辞を使用すると、メソッド2も適切にサポートされます（ie9以降）-メソッド2はOpera miniではサポートされません
• 方法3は2つのラッパーを使用します-幅と高さがオーバーフローする可能性があります。
• 方法4は、二重の画像（プレースホルダーとして1つ）を使用します。これにより、帯域幅のオーバーヘッドが追加されますが、クロスブラウザーのサポートが向上します。

方法1と3はFirefoxでは動作しないようです

別の解決策は、画像を希望の幅と高さのコンテナに入れることです。この方法を使用すると、画像を要素の背景画像として設定する必要はありません。

次に、これを行うことができます imgタグで行い、要素に最大幅と最大高さを設定するだけです。

CSS：

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML：

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

コンテナのサイズを変更すると、境界を超えたり歪んだりせずに、イメージが自動的に最大サイズに拡大されます。

画像を垂直方向と水平方向の中央に配置したい場合は、コンテナーのcssを次のように変更できます。

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

ここにJSフィドルがありますhttp://jsfiddle.net/9kUYC/2/

jQueryを使用した@Dominic Greenの回答を基に、高さよりも幅の広い画像または幅よりも高さの高い画像で機能するソリューションを次に示します。

http://jsfiddle.net/grZLR/4/

JavaScriptを実行するより洗練された方法がおそらくありますが、これは機能します。

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();

• CSSバックグラウンドを使用しない
• クリップするための1 divのみ
• 正しいアスペクト比を維持するよりも最小幅にサイズ変更
• 中央からトリミング（垂直および水平、上部、左端、変形で調整可能）

テーマなどを使用している場合は注意してください。多くの場合、それらはimg max-widthを100％と宣言します。あなたはどれも作る必要があります。それをテストしてください:)

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

Fillmoreと呼ばれるjQueryプラグインの作成を支援しました。これは、background-size: coverそれをサポートするブラウザーでを処理し、サポートしないブラウザー用のシムを備えています。見てください！

この答えにはまだ遅いと思います。とにかく、これが将来誰かを助けることを願っています。カードを斜めに配置する問題に直面しました。イベントの配列に表示されるカードがあります。イベントの画像の幅がカードに対して大きい場合、画像は両側からトリミングして高さ100％で表示する必要があります。画像の高さが長い場合、画像の下部がトリミングされ、幅は100％になります。これが私の純粋なCSSソリューションです：

HTML：

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

次のようなものを試してください：http : //jsfiddle.net/D7E3E/4/

オーバーフローのあるコンテナーの使用：非表示

編集：@ドミニクグリーンは私を倒しました。

これは、画像を拡大したり、トリミングしたりせずに、特定のサイズに画像を塗りつぶします

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}

全画面に画像を収めるには、次のことを試してください。

background-repeat：ラウンド;

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>