web-dev-qa-db-ja.com

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

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

enter image description here

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

enter image description here

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

画面が小さくなった場合に純粋な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;

}
htmlcsscss3flexbox
70
confile

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

http://jsfiddle.net/89dtxt6s/

50
Omega

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

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

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

img { 
  object-fit: contain;
}

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

ただし、IEでサポートされていないことに注意してください（サポートの詳細 here を参照）。

27
Lokinou

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

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

background-size: contain

または

background-size: cover

これらのオプションでは、画像のスケーリング時に高さと幅の両方が考慮されます。これはIE9および他のすべての最近のブラウザーで動作します。

4
user3196436

2番目の画像では、画像をボックスに収めたいように見えますが、作成した例ではアスペクト比が維持されています（ペットはスリムまたは脂肪ではなく、正常に見えます）。

あなたがそれらの画像を例としてフォトショップしたか、2番目のものも「どうあるべきか」（あなたはISと言いましたが、最初の例は「すべき」と言いました）

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

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

それがあなたの問題であれば、あなたが提供したコードは「あなたの問題」ではなく、あなたの最初の例を反映しています。

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

これが画像で可能な唯一の方法は、2番目のiimageを忘れて、セルの高さが固定されており、幸いにもサンプル画像から判断すると、高さは同じままです！

そのため、コンテナの高さが変わらず、画像を正方形に保ちたい場合は、画像の最大高さをその既知の値に設定する必要があります（ボックスのサイズ設定プロパティに応じて、パディングまたは境界線をマイナスします）セル）

このような：

<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を使用し、フレックスボックスはセルを保持していませんが、両方の例を列にあなたは「行」を設定しますが、一方のセルをもう一方のセルにネストする破損したコードは、フレックス内のフレックスをもたらし、最終的にCOLUMNSとして機能します。あなたが望むものを推測するmはこれです。

Display：flexもセルに追加したので、画像が中央に表示されます（このマークアップでdisplay: tableもここで使用できたと思います）。

3
sergio

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

.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>
0
ggzone

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;
}
0
Ukr