Ausrichten der Bildhöhe entlang einer Reihe

8

Ich kämpfe darum, dass sich die Dinge verhalten.

Ich habe eine dynamische Liste von Bildern auf einer reaktionsfähigen Site. Das Layout wird dort generiert, wo Bilder in Zeilen / Spalten oder Spaltenzeilen sein können.

Dieses Beispiel ist nah, aber die gepaarten Bilder werden unten nicht ausgerichtet, da der Browser die Größe ändert ...

<div style="width:100%;">
    <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">
        <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;">
                <div id="row" style=" padding-right: 2.330294%; "><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%"> 
                </div>
            </div>
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;">
                <div id="row" style=" "><img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg" sizes="100vw" width="100%"> </div>
            </div>
        </div>
    </div>

    <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

        <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 100%;">
                <div id="row" style=" "><img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg"  sizes="100vw" width="100%"> </div>
            </div>
        </div>
    </div>
    
    <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

        <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 43.55%;">
                <div id="row" style=" padding-right: 2.640643%; "><img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg"  sizes="100vw"  width="100%"> </div>
            </div>
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 56.45%;">
                <div id="row" style=" "><img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" sizes="100vw" width="100%"> </div>
            </div>
        </div>
    </div>
    
</div>

Erweitern Sie das Snippet

Ich habe mit Objektanpassung experimentiert, aber Safari scheint auseinanderzufallen.

EDIT: Als Referenz hier ist ein Beispiel für das Problem.

html css flexbox object-fit Dan
quelle

Fügen Sie vertical-align: bottomzu Ihren imgElementen hinzu ( Demo | Erklärung )

Michael Benjamin

Ihr Demo-Link weist immer noch das anfängliche Problem auf ... Ändern Sie die Größe des Fensters und Sie werden sehen, dass die Bilder von Zeit zu Zeit falsch ausgerichtet sind

Dan

Okay. Vielleicht ist es ein anderes Problem. Ich habe die Frage erneut geöffnet.

Michael Benjamin

Außerdem sehe ich das von Ihnen beschriebene Problem der Fehlausrichtung nicht. Zumindest nicht auf Chrome.

Michael Benjamin

Bitte sehen Sie Screenshot zur Frage hinzugefügt (Chrome v77, Mac)

Dan

3

Sie können natürlich Hintergrundbilder anstelle des HTML-IMG-Tags verwenden. Wenn Sie auf die Bildhöhe zugreifen können, würde ich empfehlen, diese dynamisch über JavaScript oder PHP (oder ein beliebiges Setup) auszufüllen. Ich legte ein Spacer-Div in den Verpackungsbehälter, der für diesen Zweck verwendet werden konnte.

#wrap_all {
  width:100%;
}

#inner {
  max-width:1210px;
  padding:0 50px;
  margin:0 auto;
}

.flexrow {
  display:flex;
  justify-content: space-between;
  background:#f5f5f5;
  flex-wrap:wrap;
}


.flexcol {
  flex:0 0 49%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:top center;
  margin-bottom: 2%;
}

.spacer.height-80vh {
  height:80vh;
}

.flexcol.fullwidth {
  flex:0 0 100%;
}

<div id="wrap_all">
    
  <div id="inner">
    
    <div class="flexrow">
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/Xv5YsYv7/2.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/B6cQG7Dr/1.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol fullwidth" style="background-image: url('https://i.postimg.cc/ZnbYYPxC/3.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/bwsJ2Tcn/5.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/XJ07m6ZK/4.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
    </div>
    
  </div>  
  
</div>

Erweitern Sie das Snippet

wbq
quelle

2

Dies wird als Pixelrundung oder Subpixel-Problem bezeichnet und ist ein grundlegendes mathematisches Problem:

Sie haben zwei Container mit einer relativen Breite von ~ 50% in einem ansprechenden Elternteil. Was soll passieren, wenn die Breite des übergeordneten Elements eine ungerade Zahl ist? Sagen wir 211 Pixel. 50% von 211px sind 105,5px. ABER es gibt keine .5px - Ihr Bildschirm kann einfach nicht nur die Hälfte dieser kleinen Glühbirne einschalten, die ein Pixel physisch definiert. Der Browser rundet es auf eine größere oder kleinere Zahl.

Wenn Sie genau hinschauen, besteht das Layout aus:

Spalten mit dezimalen% -Werten für die Breite (49,35%)
Dezimal% für den Abstand (Polsterung: 2,330294%)
Bilder mit zufälligen Breiten und Höhen
Keine definierte Höhe für eine der Spalten.
Alles umhüllt von einem reaktionsschnellen Div, was bedeutet, dass es nirgendwo eine absolute Breite oder Höhe gibt.

Es gibt einfach keine Lösung, um Bilder mit unterschiedlichen Abmessungen in Divs mit unterschiedlichen Abmessungen innerhalb eines% -orientierten Layouts einzufügen. Das ist einfach zu viel Pixelrundung, um das zu berücksichtigen. Wenn Sie genau hinschauen, ist dieses Layout 100% der Zeit " kaputt " ... es hinterlässt entweder leere Pixel oder verkleinert / verzerrt die Bilder im Inneren.

Welcher Hack auch immer vorhanden ist, erzeugt entweder dieses kleine leere Pixel, verzerrt die Bilder (wieder haben sie nicht die gleiche Höhe oder Breite) oder versteckt Pixel heimlich irgendwo vor dem Bild.

Nun ein kurzer Hack für das spezifische Snipet, das Sie vorgestellt haben:

Verwenden Sie absolute px, um nach links zu füllen
Fügen Sie dem Polsterboden einen leeren Abstandshalter hinzu, indem Sie: after verwenden

img {
  vertical-align: bottom;
}

.column {
  position: relative;
}

.column:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  height: 6px; /* this will fake padding bottom */
}

.row {
  padding-left: 6px;
}

<div style="width:100%;">
  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">
    <div id="outterrow" style="width:100%;  float:left; display: flex;">
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;">
        <div class="row" ><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%">
        </div>
      </div>
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;">
        <div class="row" style=" "><img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

    <div id="outterrow" style="width:100%;  float:left; display: flex;">
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 100%;">
        <div class="row" style=" "><img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

    <div id="outterrow" style="width:100%;  float:left; display: flex; ">
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 43.55%;">
        <div class="row"><img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg" sizes="100vw" width="100%"> </div>
      </div>
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 56.45%;">
        <div class="row" style=" "><img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

</div>

Erweitern Sie das Snippet

Auch hier gibt es keine "Lösung" unter diesen Bedingungen, nur Hacks mit Nachteilen.

* Um fair mit Browsern umzugehen, arbeiten sie so gut mit Pixelrundungen, dass die meisten Entwickler nicht einmal erkennen, dass dies ein Problem ist.

ebessa
quelle

0

Wenn CSS zu kurz kommt, gehe ich vanillaz:

Code-Snippet anzeigen

document.addEventListener('DOMContentLoaded', function() {
  [...document.querySelectorAll('.flex-fill')].forEach(div => {
    [...div.querySelectorAll('img')].forEach(img => {
      img.addEventListener('load', () => {
        const box = document.createElement('div');
        const basis = img.height ? img.width * 100 / img.height : 0;
        box.style.background = `url('${img.src}') center /cover no-repeat`;
        box.style.flexBasis = `${basis}%`;
        box.setAttribute('data-basis', basis);
        div.insertBefore(box, img);
        box.appendChild(img);
      })
    })
  });
  const resizeFlexFills = _.throttle(() => {
    [...document.querySelectorAll('.flex-fill')].forEach(div => {
      const gutter = (div.currentStyle || window.getComputedStyle(div))
        .marginBottom.match(/\d+/)[0] || 0;
      const children = [...div.querySelectorAll('div')];
      const basisSum = children.map(e => e.dataset.basis)
        .reduce((a, b) => Number(a) + Number(b));
      div.style.height = `${(div.offsetWidth - ((children.length - 1) * gutter)) * 100 / basisSum}px`;
      [...div.querySelectorAll('div:not(:last-child)')].forEach(div => {
        div.style.marginRight = `${gutter}px`
      })
    })
  }, 100, {
    leading: true,
    trailing: true
  });
  window.addEventListener('load', resizeFlexFills);
  window.addEventListener('resize', resizeFlexFills);
});

.flex-fill {
  width: 100%;
  display: flex;
  height: 0;
  transition: height .3s cubic-bezier(.4, 0, .2, 1);
  /* gutter size (remove if you don't want any space between them) */
  margin-bottom: 8px;
}

.flex-fill img {
  display: none;
}

@media(max-width: 600px) {
  .flex-fill {
    height: auto !important;
    display: block;
  }
  .flex-fill img {
    display: block;
    width: 100%;
   /* needs to be same as gutter size, above */
    margin-bottom: 8px;
  }
  .flex-fill div {
    margin-right: 0 !important;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

<div class="flex-fill">
  <img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg">
  <img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg">
  <img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg">
  <img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg">
  <img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg">
</div>
<div class="flex-fill">
  <img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg">
  <img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg">
</div>
<div class="flex-fill">
  <img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg">
</div>
<div class="flex-fill">
  <img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg">
  <img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg">
</div>

Erweitern Sie das Snippet

Anmerkungen:

Das Besondere daran ist, dass die Bildverhältnisse mit oder ohne Dachrinnen beibehalten werden und, wie Sie sehen können, pixelgenau sind
Dazu muss jedoch resizeFlexFills()gebunden werden loadund resizedie Höhen aktualisiert werden
deshalb habe ich lodashs verwendet, throttleum nur zuzulassen, dass es alle ausgeführt wird 100ms;
Die Rinne wird über CSS eingestellt und funktioniert nur mit px. Es kann intelligenter gemacht werden, aber das Parsen von CSS-Einheiten in Pixel liegt weit außerhalb des Rahmens dieser Frage (IMHO).
das transitionist total grabenfähig
Es ist nicht "reaktionsschnell", könnte aber leicht gemacht werden. Dazu lasse ich das <img>s in, zeige es als Blöcke unter der gewünschten Gerätebreite an und ändere das flex-directionin column.
Eigentlich habe ich es reaktionsschnell gemacht. Wenn Sie es nicht möchten, entfernen Sie den @mediaAbfragecode.

tao
quelle

-1

Damit das Bild zum div passt, müssen Sie height: 100%den img-Stil hinzufügen und die div-Höhe auf dem übergeordneten div des img angeben.

Bitte beachten Sie den folgenden Code:

<div style="width:100%;height: 100%;">
  <div style="width: 100%;padding-bottom: 1.15%; ">
    <div style="width:60%; margin-left: auto;  margin-right: auto;display: flex;height: 250px;">
      <div class="row" style=" padding-right: 2.330294%;width: 50%;">
        <img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg"  width="100%" height="100%"> 
      </div>
      <div class="row" style=" width: 50%;">
        <img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg"  width="100%"  height="100%">
      </div>
    </div>
  </div>
    
  <div style="width: 100%; padding-bottom: 1.15%; ">
    <div style="width:60%;margin-left: auto;  margin-right: auto;display: flex;">
      <div class="row" style=" ">
        <img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg"   width="100%">
      </div>
    </div>
  </div>
        
  <div style="width: 100%;">
    <div style="width:60%;margin-left: auto;  margin-right: auto;display: flex;height: 200px;">
      <div class="row" style=" padding-right: 2.640643%; width: 50%;">
        <img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg" height="100%" width="100%"> 
      </div>
      <div class="row" style=" width: 50%;">
        <img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" height="100%" width="100%"> 
      </div>
    </div>
  </div>        
</div>

Erweitern Sie das Snippet

dom.macs
quelle

Ausrichten der Bildhöhe entlang einer Reihe

Antworten: