CSS FlexBoxレイアウトで画像の自動サイズ変更とアスペクト比の維持？

以下のように表示されるCSSフレックスボックスレイアウトを使用しました。

画面が小さくなると、次のようになります。

問題は、元の画像からのアスペクト比を維持しながら、画像のサイズが変更されないことです。

純粋なCSSとフレックスボックスレイアウトを使用して、画面が小さくなった場合に画像のサイズを変更することはできますか？

これが私のhtmlです：

<div class="content">
  <div class="row"> 
    <div class="cell">
      <img src="http://i.imgur.com/OUla6mK.jpg"/>
    </div>
    <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
  </div>
</div>

私のCSS：

.content {
    background-color: yellow;    
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

    background-color: red;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 

    padding: 10px;
    margin: 10px;

    background-color: green;
    border: 1px solid red;
    text-align: center;

}

img {max-width:100%;}これを行う1つの方法です。CSSコードに追加するだけです。

http://jsfiddle.net/89dtxt6s/

私は歪んだ画像への答えを探してここに来ました。上記の操作で何が求められているかは完全にはわかりalign-items: centerませんが、追加することで解決できることがわかりました。ドキュメントを読んでいる場合、これalign-items: stretchがデフォルトなので、画像を直接変更する場合は、これをオーバーライドするのが理にかなっています。別の解決策は、最初にdivで画像をラップすることです。

.myFlexedImage {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

非常に新しくシンプルなCSS3機能を試してみてください。

img { 
  object-fit: contain;
}

（背景画像のトリックを使用するときのように）画像の比率を維持し、私の場合、同じ問題に対してうまく機能しました。

ただし、IEではサポートされていません（サポートの詳細についてはこちらをご覧ください）。

background-size画像サイズを調整するためのオプションを検討することをお勧めします。

ページに画像を配置する代わりに、背景画像として設定している場合は、次のように設定できます。

background-size: contain

または

background-size: cover

これらのオプションでは、画像を拡大縮小するときに高さと幅の両方が考慮されます。これはIE9と他のすべての最近のブラウザーで動作します。

2番目の画像では、画像がボックスを埋めるように見えますが、作成した例では縦横比が維持されています（ペットは通常のように見え、スリムで太っていません）。

これらの画像を例としてフォトショップしたか、2番目の画像も「本来あるべき姿」であるかどうかはわかりません（あなたはISと言いましたが、最初の例は「あるべきだ」と言いました）。

とにかく、私は仮定する必要があります：

「画像が縦横比を維持したままサイズ変更されない」で、ピクセルの縦横比を維持した画像を表示した場合、「トリミング」領域の縦横比を達成しようとしていると想定する必要があります。緑）ピクセルのアスペクト比を維持するWILE。つまり、画像を拡大およびトリミングして、セルを画像で塗りつぶします。

それがあなたの問題である場合、あなたが提供したコードは「あなたの問題」を反映していませんが、あなたの開始例です。

前の2つの仮定を前提として、ボックスの高さが動的である場合、実際の画像では必要なことを実行できませんが、背景画像では実行できません。「background-size：contain」またはこれらの手法を使用するか（任意の場所でトリミングまたは最大サイズを制限するパーセント単位のスマートパディング）：http : //fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm

これが画像で可能になる唯一の方法は、2番目のiimageを忘れて、セルの高さが固定されていて、サンプル画像から判断すると高さが変わらないことです。

したがって、コンテナの高さが変化せず、画像を正方形のままにしたい場合は、画像のmax-heightをその既知の値（パディングまたはボーダーのマイナス、ボックスのサイズ変更プロパティに応じて）に設定するだけです細胞）

このような：

<div class="content">
  <div class="row">    
      <div class="cell">    
          <img src="http://lorempixel.com/output/people-q-c-320-320-2.jpg"/>
      </div>
      <div class="cell">    
          <img src="http://lorempixel.com/output/people-q-c-320-320-7.jpg"/>
      </div>
    </div>
</div>

そしてCSS：

.content {
    background-color: green;
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px;
    border: solid 10px red;
    text-align: center;
    height: 300px;
    display: flex;
    align-items: center;
    box-sizing: content-box;
}
img {
    margin: auto;
    width: 100%;
    max-width: 300px;
    max-height:100%
}

http://jsfiddle.net/z25heocL/

コードが無効です（開始タグは閉じるタグの代わりにあるため、兄弟ではなくネストされたセルを出力し、欠陥のあるコード内で画像のSCREENSHOTを使用し、フレックスボックスはセルを保持していませんが、両方の例を列に保持しています（あなたは「行」を設定しましたが、1つのセルを他のセルの中に入れ子にした破損したコードは、最終的にCOLUMNSとして機能するフレックス内のフレックスをもたらしました。 mあなたが欲しいものはこれだと思います。

表示を追加しました：セルにもフレックスし、画像が中央に配置display: tableされるようにしました（このマークアップすべてでここでも使用できたと思います）

HTML：

<div class="container">
    <div class="box">
        <img src="http://lorempixel.com/1600/1200/" alt="">
    </div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);
}

.box {
  border-radius: 4px;
  display: flex;
}

.box img {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

これが、柔軟なグリッドでさまざまな画像（サイズと比率）を処理する方法です。

.images {
  display: flex;
  flex-wrap: wrap;
  margin: -20px;
}

.imagewrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - 20px);
  height: 300px;
  margin: 10px;
}

.image {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%; /* set to 'auto' in IE11 to avoid distortions */
}

<div class="images">
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/800x600" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1024x768" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1000x800" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/500x800" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/800x600" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1024x768" />
  </div>
</div>

比率を維持するためにjqueryまたはvwを使用しています

jquery

function setSize() {
    var $h = $('.cell').width();
    $('.your-img-class').height($h);
}
$(setSize);
$( window ).resize(setSize); 

vw

 .cell{
    width:30vw;
    height:30vw;
}
.cell img{
    width:100%;
    height:100%;
}