divを比例させながら、divを画像で埋めるにはどうすればよいですか？

私はこのスレッドを見つけました— 画像の縦横比を維持しながら、どのようにして画像をストレッチして<div>を埋めますか？—それは完全に私が欲しいものではありません。

特定のサイズのdivとその中に画像があります。画像が横向きか縦向きかに関係なく、常に divに画像を入力したい。また、画像が切り取られていても問題ありません（div自体にオーバーフローが隠されています）。

画像がポートレートであるので、もし私がしたいwidthこと100%とheight:auto、それは割合にとどまるようにします。画像が横長の場合は私がしたいheightことを100%してwidth to beauto`。複雑に聞こえますか？

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

どうすればいいのかわからないので、私が何を言っているのかを簡単にイメージしました。私もそれを適切に説明することはできません。

だから、私はこれを尋ねる最初のものではないと思います。しかし、私は本当にこれに対する解決策を見つけることができませんでした。たぶん、これを行うための新しいCSS3の方法があるかもしれません-フレックスボックスを考えています。何か案が？多分それは私が思っているよりももっと簡単ですか？

必要なものを正しく理解している場合は、幅と高さの属性を画像から外してアスペクト比を維持し、フレックスボックスを使用して中央揃えを行うことができます。

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddleはこちら

私はこれをIE9、Chrome 31、およびOpera 18でテストしましたが、他のブラウザーはテストされていません。いつものように、特定のサポート要件を考慮する必要があります。

少し遅いですが、私は同じ問題を抱えていて、最後に別のスタックオーバーフローの投稿（https://stackoverflow.com/a/29103071）の助けを借りて解決しました。

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

これがまだ誰かを助けることを願っています。

Ps：また、max-height、max-width、min-width、およびmin-height cssプロパティと連動します。これは、100％や100vh / 100vwなどの長さの単位を使用してコンテナやブラウザウィンドウ全体を埋めるのに便利です。

古い質問ですが、今は方法があるので更新に値します。

正しいCSSベースの答えが使用されるobject-fit: coverように動作します、background-size: cover。ポジショニングは、object-position属性、デフォルトでは中央に配置ます。

しかし、IE / Edgeブラウザ、またはAndroid 4.4.4未満ではサポートされていません。また、object-positionSafari、iOS、OSXではサポートされていません。ポリフィルは存在します、オブジェクトフィット画像最も良いサポートを提供するようです。

プロパティの動作の詳細については、CSSトリックの記事でobject-fit説明とデモを参照してください。

これはそれを行うはずです：

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

以下の回答はすべて幅と高さが固定されているため、ソリューションが「応答しなくなります」。

結果を達成しながら画像の応答性を保つために、私は以下を使用しました：

1. コンテナの内側に、希望の比率で透明なgif画像を配置します
2. サイズを変更してトリミングする画像を画像タグのインラインcss背景に付けます

HTML：

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

これは、css flexプロパティを使用して実現できます。以下のコードをご覧ください

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

background-size: coverと組み合わせて（IE9 +）を使用することを検討してくださいbackground-image。IE8-には、ポリフィルがあります。

これを試して：

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

お役に立てれば

これを実現するためにdivを使用できます。imgタグなし:)これが役立つことを願っています。

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}

<div class="img">	
</div>
<div class="img1">	
</div>

説明した「ベストケース」のシナリオを実現する唯一の方法は、画像を背景として配置することでした。

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

.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%;
}​

これは、IEをサポートしているobject-fitため、比率を失うことはありません。

シンプルなJSスニペットを使用して、object-fitサポートされているかどうかを検出 imgし、svg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

注：機能するいくつかのobject-fitポリフィルもありますobject-fit。

以下にいくつかの例を示します。

• オブジェクトフィットイメージ
• constancecchen / object-fit-pollyfill
• CSSオブジェクトフィットプロパティのポリフィル

ここに私の実際の例があります。background-size：coverとbackground-position：center centerを使用して、divコンテナーの背景として画像を設定するトリックを使用しました

width：100％とopacity：0の画像を配置して非表示にしました。子クリックイベントの呼び出しに特別な関心があるため、画像を表示していることに注意してください。

角張った角度を使用していることに注意してください。完全に無関係です。

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

結果は、すべてのケースで最適と定義したものです

CSS object-fit: coverとobject-position: left centerプロパティの値は、この問題に対処しています。

画像の高さを修正して、width = autoを指定するだけです

img{
    height: 95vh;
    width: auto;
}