Bildgröße im CSS-FlexBox-Layout automatisch ändern und Seitenverhältnis beibehalten?

Ich habe das CSS-Flexbox-Layout verwendet, das wie folgt aussieht:

Wenn der Bildschirm kleiner wird, wird daraus:

Das Problem ist, dass die Größe der Bilder nicht geändert wird, wobei das Seitenverhältnis vom Originalbild beibehalten wird.

Ist es möglich, reines CSS und das Flexbox-Layout zu verwenden, um die Größe der Bilder zu ändern, wenn der Bildschirm kleiner wird?

Hier ist mein 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>

mein 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%;}ist eine Möglichkeit, dies zu tun. Fügen Sie es einfach Ihrem CSS-Code hinzu.

http://jsfiddle.net/89dtxt6s/

Ich kam hierher, um eine Antwort auf meine verzerrten Bilder zu suchen. Ich bin align-items: centermir nicht ganz sicher, wonach die Operation oben sucht, aber ich fand, dass das Hinzufügen sie für mich lösen würde. Wenn Sie die Dokumente lesen, ist es sinnvoll, dies zu überschreiben, wenn Sie Bilder direkt biegen, da dies align-items: stretchdie Standardeinstellung ist. Eine andere Lösung besteht darin, Ihre Bilder zuerst mit einem Div zu versehen.

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

Vielleicht möchten Sie die sehr neue und einfache CSS3-Funktion ausprobieren:

img { 
  object-fit: contain;
}

Das Bildverhältnis bleibt erhalten (wie bei Verwendung des Hintergrundbildtricks), und in meinem Fall hat es für dasselbe Problem gut funktioniert.

Seien Sie jedoch vorsichtig, es wird vom IE nicht unterstützt (siehe Support-Details hier ).

Ich schlage vor, nach background-sizeOptionen zum Anpassen der Bildgröße zu suchen .

Anstatt das Bild auf der Seite zu haben, wenn Sie es als Hintergrundbild festgelegt haben, können Sie Folgendes festlegen:

background-size: contain

oder

background-size: cover

Diese Optionen berücksichtigen beim Skalieren des Bildes sowohl die Höhe als auch die Breite. Dies funktioniert in IE9 und allen anderen aktuellen Browsern.

Im zweiten Bild sieht es so aus, als ob Sie möchten, dass das Bild das Feld ausfüllt, aber das von Ihnen erstellte Beispiel behält das Seitenverhältnis bei (die Haustiere sehen normal aus, nicht schlank oder fett).

Ich habe keine Ahnung, ob Sie diese Bilder als Beispiel mit Photoshops versehen haben oder das zweite ist "wie es sein sollte" (Sie sagten IS, während das erste Beispiel "sollte" sagte).

Jedenfalls muss ich annehmen:

Wenn "die Größe der Bilder nicht unter Beibehaltung des Seitenverhältnisses geändert wird" und Sie mir ein Bild zeigen, das das Seitenverhältnis der Pixel beibehält, muss ich davon ausgehen, dass Sie versuchen, das Seitenverhältnis des "Zuschneide" -Bereichs (das Innere von) zu erreichen das Grün) WILE behält das Seitenverhältnis der Pixel bei. Das heißt, Sie möchten die Zelle mit dem Bild füllen, indem Sie das Bild vergrößern und zuschneiden.

Wenn dies Ihr Problem ist, spiegelt der von Ihnen angegebene Code NICHT "Ihr Problem" wider, sondern Ihr Startbeispiel.

Unter den beiden vorhergehenden Annahmen kann das, was Sie benötigen, nicht mit tatsächlichen Bildern erreicht werden, wenn die Höhe der Box dynamisch ist, sondern mit Hintergrundbildern. Entweder mithilfe von "Hintergrundgröße: Enthalten" oder diesen Techniken (intelligente Auffüllungen in Prozent, die das Zuschneiden begrenzen, oder die maximale Größe, wo immer Sie möchten): http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm

Dies ist mit Bildern nur möglich, wenn wir Ihr zweites Bild VERGESSEN und die Zellen eine feste Höhe haben. Glücklicherweise bleibt die Höhe nach Ihren Beispielbildern gleich!

Wenn sich also die Höhe Ihres Containers nicht ändert und Sie Ihre Bilder quadratisch halten möchten, müssen Sie nur die maximale Höhe der Bilder auf diesen bekannten Wert einstellen (minus Auffüllungen oder Rahmen, abhängig von der Box-Size-Eigenschaft des Zellen)

So was:

<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>

Und das 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/

Ihr Code ist ungültig (öffnende Tags sind nicht schließende Tags, daher geben sie NESTED-Zellen aus, keine Geschwister. Er hat einen SCREENSHOT Ihrer Bilder im fehlerhaften Code verwendet, und die Flexbox enthält nicht die Zellen, sondern beide Beispiele in einer Spalte ( Sie haben "row" eingerichtet, aber der beschädigte Code, der eine Zelle in der anderen verschachtelt, führte zu einem Flex innerhalb eines Flex, der schließlich als COLUMNS fungierte. Ich habe keine Ahnung, was Sie erreichen wollten und wie Sie auf diesen Code gekommen sind, aber ich ' Ich vermute, was Sie wollen, ist dies.

Ich habe den Zellen auch display: flex hinzugefügt, damit das Bild zentriert wird (ich denke, display: tablees hätte auch hier mit all diesen Markups verwendet werden können).

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

So würde ich mit verschiedenen Bildern (Größen und Proportionen) in einem flexiblen Raster umgehen.

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

Ich benutze jquery oder vw, um das Verhältnis zu halten

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