Alinhando a altura da imagem ao longo de uma linha

8

Lutando para que as coisas se comportem.

Eu tenho uma lista dinâmica de imagens em um site responsivo. O layout é gerado onde as imagens podem estar em linhas / colunas ou linhas de colunas.

Este exemplo está próximo, mas as imagens emparelhadas não se alinham na parte inferior à medida que o navegador é redimensionado ...

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

Eu experimentei o ajuste de objetos, mas o Safari parece desmoronar.

EDIT: para referência, aqui está um exemplo do problema.

— Dan
fonte

Adicionar vertical-align: bottoma seus imgelementos ( demonstração | explicação )

— Michael Benjamin

O seu link de demonstração ainda exibe o problema inicial ... redimensionar a janela e você verá as imagens mis alinhar cada tantas vezes

— Dan

OK. Talvez seja um problema diferente. Eu reabri a pergunta.

— Michael Benjamin

Além disso, não vejo o problema de desalinhamento que você está descrevendo. Pelo menos não no Chrome.

— Michael Benjamin

Por favor, veja a captura de tela adicionada à pergunta (Chrome v77, Mac)

— Dan

3

Obviamente, você pode usar imagens de fundo em vez da tag img HTML. Se você puder acessar a altura da imagem, eu recomendaria preenchê-la dinamicamente via JavaScript ou PHP (ou qualquer configuração que você tenha). Coloquei um div espaçador dentro do recipiente de embalagem, que poderia ser usado para esse fim.

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

— wbq
fonte

2

Isso é chamado de arredondamento de pixels, ou o problema de subpixels, e é um problema matemático básico:

Você tem dois contêineres com uma largura relativa de ~ 50% dentro de um pai responsivo. O que deve acontecer quando a largura desse elemento pai é um número ímpar? Diga 211 pixels. 50% de 211px é 105,5px. MAS, não existe .5px - sua tela não consegue acender apenas metade da pequena lâmpada que define fisicamente um pixel. O navegador o arredonda para um número maior ou menor.

Se você olhar de perto, o layout é composto por:

Colunas com valores em% decimal para largura (49,35%)
% Decimal para espaçamento (preenchimento: 2,330294%)
Imagens com larguras e alturas aleatórias
Nenhuma altura definida para nenhuma das colunas.
Tudo envolvido por uma div responsiva, o que significa que não existe largura ou altura absoluta em lugar algum.

Não há solução para inserir imagens de dimensões variadas dentro de divs de dimensões variadas dentro de um layout orientado a%. Isso é muito arredondamento de pixels para explicar. Se você olhar de perto, esse layout estará " quebrado " 100% do tempo ... deixando pixels em branco ou diminuindo / distorcendo as imagens.

Qualquer que seja o hack que alguém presente gerará esse pequeno pixel em branco, distorcerá as imagens (novamente, elas não têm a mesma altura ou largura) ou ocultará secretamente os pixels da imagem em algum lugar.

Agora, um truque rápido para o snipet específico que você apresentou:

use px absoluto para estofar à esquerda
adicione um espaçador em branco ao fundo do preenchimento usando: depois

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 snippet

Novamente, nenhuma "solução" existe nessas condições, apenas hacks com desvantagens.

* Para ser justo com os navegadores, eles estão fazendo um trabalho tão bom ao lidar com o arredondamento de pixels que a maioria dos desenvolvedores nem percebe que isso é um problema.

— ebessa
fonte

0

Quando o CSS falha, eu vou vanillaz:

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

Notas:

o que há de especial nisso é que as proporções de imagem são mantidas, com ou sem calhas e, como você pode ver, é perfeito em pixels
para que isso aconteça, no entanto, resizeFlexFills()precisa estar vinculado loade resizeatualizar as alturas
portanto, usei o lodash's throttlepara permitir apenas executá-lo a cada 100ms;
a calha é definida via CSS e só funciona com px. Isso pode ser feito de maneira mais inteligente, mas a análise de unidades CSS em pixels está muito fora do escopo desta questão (IMHO).
o transitioné totalmente vala
não é "responsivo", mas pode ser feito facilmente. para que isso aconteça, deixaria os <img>s dentro, exibi-los como blocos na largura desejada do dispositivo, enquanto alterava o flex-directionpara column.
na verdade, eu respondi bem. Se você não quiser, remova o @mediacódigo da consulta.

— tao
fonte

-1

Para que a imagem caiba na div, você precisa adicionar height: 100%o estilo img e também especificar a altura da div na div pai da img.

Por favor, veja o código abaixo:

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

— dom.macs
fonte