wake-up-neo.net

Bild in CSS FlexBox Layout automatisch anpassen und Seitenverhältnis beibehalten

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

enter image description here

Wenn der Bildschirm kleiner wird, wird daraus Folgendes: 

enter image description here

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 ändern zu können, 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;

}
65
confile

img {max-width:100%;} ist eine Möglichkeit, dies zu tun. Fügen Sie es einfach zu Ihrem CSS-Code hinzu.

http://jsfiddle.net/89dtxt6s/

45
Omega

Ich kam hierher und suchte nach einer Antwort auf meine verzerrten Bilder. Ich bin nicht ganz sicher, wonach der Op oben sucht, aber ich fand, dass das Hinzufügen von align-items: center das für mich lösen würde. Beim Lesen der Dokumente ist es sinnvoll, dies zu überschreiben, wenn Sie Bilder direkt biegen, da align-items: stretch die 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;
}
53
gdbj

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

img { 
  object-fit: contain;
}

Es bewahrt das Bildverhältnis (wie wenn Sie den Hintergrund-Bild-Trick verwenden) und arbeitete in meinem Fall für das gleiche Problem gut.

Seien Sie vorsichtig, es wird nicht von IE unterstützt (siehe Supportdetails here ).

21
Lokinou

Ich schlage vor, in background-size-Optionen nachzuschauen, um die Bildgröße anzupassen. 

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.

4
user3196436

Im zweiten Bild sieht es so aus, als ob das Bild das Feld ausfüllen soll, 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 Photoshop aufgenommen haben oder das zweite ist "wie es sein sollte" (Sie sagten IS, während das erste Beispiel "Sie" sagte).

Jedenfalls muss ich annehmen:

Wenn "die Größe der Bilder nicht unter Beibehaltung des Seitenverhältnisses geändert wird" und Sie ein Bild anzeigen, das das Seitenverhältnis der Pixel beibehält, muss ich davon ausgehen, dass Sie versuchen, das Seitenverhältnis des "Beschneidebereichs" (des inneren Bereichs) zu erreichen die grüne WILE hält das Seitenverhältnis der Pixel. D.h. 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 bereitgestellte Code NICHT "Ihr Problem" wider, sondern Ihr Startbeispiel.

In Anbetracht der vorherigen beiden 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 mit "background-size: enthalten" oder diesen Techniken (intelligente Auffüllungen in Prozent, die das Beschneiden einschränken, oder maximale Größe an beliebiger Stelle): http://fofwebdesign.co.uk/template/_testing/scale -img/scale-img.htm

Dies ist bei Bildern nur möglich, wenn wir über Ihr zweites Bild VERGESSEN haben und die Zellen eine feste Höhe haben. Wenn Sie die Beispielbilder betrachten, bleibt die Höhe jedoch 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 setzen (minus Füllungen oder Ränder, abhängig von der Box-Size-Eigenschaft des Fensters) 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 (Eröffnungs-Tags sind keine schließenden), sie geben NESTED-Zellen aus, keine Geschwister, er hat ein SCREENSHOT Ihrer Bilder innerhalb des fehlerhaften Codes verwendet, und die Flexbox enthält nicht die Zellen, sondern beide Beispiele in einer Spalte ( Sie haben "Reihe" eingerichtet, aber der korrupte Code, der eine Zelle in der anderen verschachtelte, führte zu einem Flex innerhalb eines Flex, der schließlich als COLUMNS ..__ arbeitete. Ich habe keine Ahnung, was Sie erreichen wollten und wie Sie diesen Code gefunden haben. aber ich vermute, was Sie wollen, ist das hier.

Ich fügte hinzu, dass die Zellen auch mit einer Anzeige versehen wurden: "flex", so dass das Bild zentriert wird (ich denke, display: table könnte hier auch mit diesem Markup verwendet worden sein)

3
sergio

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