Alinear la altura de la imagen a lo largo de una fila

8

Luchando para que las cosas se comporten.

Tengo una lista dinámica de imágenes en un sitio receptivo. El diseño se genera donde las imágenes pueden estar en filas / columnas o filas de columnas.

Este ejemplo está cerca, pero las imágenes emparejadas no se alinean en la parte inferior a medida que el navegador cambia de tamaño ...

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

Expandir fragmento

He experimentado con el ajuste de objetos, pero Safari parece desmoronarse.

EDITAR: para referencia aquí es un ejemplo del problema.

— Dan
fuente

Agregue vertical-align: bottoma sus imgelementos ( demo | explicación )

— Michael Benjamin

Su enlace de demostración aún muestra el problema inicial ... cambie el tamaño de la ventana y verá que las imágenes se alinean mal cada cierto tiempo

— Dan

Bueno. Quizás es un problema diferente. He vuelto a abrir la pregunta.

— Michael Benjamin

Además, no veo el problema de desalineación que estás describiendo. Al menos no en Chrome.

— Michael Benjamin

Ver captura de pantalla agregada a la pregunta (Chrome v77, Mac)

— Dan

3

Por supuesto, puede usar imágenes de fondo en lugar de la etiqueta img HTML. Si puede acceder a la altura de la imagen, recomendaría completarla dinámicamente a través de JavaScript o PHP (o cualquier configuración que tenga). Coloqué un separador dentro del contenedor de envoltura, que podría usarse para ese propósito.

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

Expandir fragmento

— wbq
fuente

2

Esto se llama redondeo de píxeles, o el problema de subpíxel, y es un problema matemático básico:

Tiene dos contenedores con un ancho relativo de ~ 50% dentro de un padre receptivo. ¿Qué debería suceder cuando el ancho de ese elemento padre es un número impar? Digamos 211 píxeles. 50% de 211px es 105.5px. PERO, no hay nada como .5px : su pantalla simplemente no puede encender solo la mitad de esa pequeña bombilla que define físicamente un píxel. El navegador lo redondea a un número mayor o menor.

Si mira de cerca, el diseño está compuesto por:

Columnas con valores de% decimal para ancho (49.35%)
% Decimal para espaciado (relleno: 2.330294%)
Imágenes con anchos y alturas aleatorias
Sin altura definida para ninguna de las columnas.
Todo envuelto por un div receptivo, lo que significa que no hay ancho o altura absoluta en ningún lado.

Simplemente no hay solución para insertar imágenes de diferentes dimensiones dentro de divs de diferentes dimensiones dentro de un diseño orientado en%. Eso es demasiado redondeo de píxeles para tener en cuenta. Si mira de cerca, este diseño está " roto " el 100% del tiempo ... o deja píxeles en blanco o encoge / distorsiona las imágenes en su interior.

Cualquiera que sea el truco que alguien presente generará ese pequeño píxel en blanco, distorsionará las imágenes (nuevamente, no tienen la misma altura o ancho) u ocultará en secreto los píxeles de la imagen en algún lugar.

Ahora, un truco rápido para el fragmento específico que has presentado:

usa px absoluto para rellenar a la izquierda
agregue un espaciador en blanco al fondo del relleno usando: después

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>

Expandir fragmento

Una vez más, no existe una "solución" en estas condiciones, solo hacks con inconvenientes.

* Para ser justos con los navegadores, están haciendo un trabajo tan bueno manejando el redondeo de píxeles que la mayoría de los desarrolladores ni siquiera se dan cuenta de que esto es un problema.

— ebessa
fuente

0

Cuando CSS falla, me voy vanillaz:

Mostrar fragmento de código

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>

Expandir fragmento

Notas:

Lo especial es que las relaciones de imagen se mantienen, con o sin canalones y, como puede ver, es perfecto en píxeles
para que eso suceda, sin embargo, resizeFlexFills()debe estar vinculado loady resizeactualizar las alturas
por lo tanto, usé lodash throttlepara permitir solo ejecutarlo todos 100ms;
la canaleta se configura a través de CSS y solo funciona con px. Se puede hacer de manera más inteligente, pero analizar las unidades CSS en píxeles está fuera del alcance de esta pregunta (en mi humilde opinión).
el transitiones totalmente zanja
no es "sensible", pero podría hacerse fácilmente. para que eso suceda, dejaría los <img>s dentro, los mostraría como bloques bajo el ancho deseado del dispositivo, mientras cambiaba flex-directiona column.
En realidad, lo hice receptivo. Si no lo desea, elimine el @mediacódigo de consulta.

— tao
fuente

-1

Para que la imagen se ajuste al div, debe agregar height: 100%el estilo img y también especificar la altura del div en el div padre del img.

Por favor vea el siguiente código:

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

Expandir fragmento

— dom.macs
fuente