Четыре картинки с общим углом: альтернатива HTML + CSS макет

Question

Я пытаюсь настроить четыре панели изображений с общим углом.Изображения выбираются случайным образом и часто имеют разные размеры.

Мне удалось получить правильную компоновку, используя абсолютное расположение изображений внутри соответствующих ячеек таблицы:

  table {
    width: 100%;
  }

  td {
    position: relative;
  }
  
  img {
    position: absolute;
  }
  
  .top img {
    bottom: 0; 
  }
  
  .bottom img {
    top: 0;
  }
    
  .left img {
    right: 0;
  }
 
  .right img {
    left: 0;
  }

<table>
  <tr>
    <td class="top left">
      <img src="http://placekitten.com/200/300"/>
    </td>
    <td class="top right">
      <img src="http://placekitten.com/300/300"/>
    </td>
  </tr>
  <tr>
    <td class="bottom left">
      <img src="http://placekitten.com/300/100"/>
    </td>
    <td class="bottom right">
      <img src="http://placekitten.com/200/200"/>
    </td>
  </tr>
</table>

Однако td s имеют нулевую высоту из-за абсолютного позиционирования.Как следствие, я изо всех сил пытаюсь расположить всю таблицу в правильном положении на всей странице.

Мне интересно, есть ли другой способ добиться этого макета?

Answer 1

Давайте разделим это на строки, затем на ячейки и все это с помощью flexbox.

.row
{
  display: flex;
}

.cell
{
  width: 50%;
  flex: 0 0 auto;
  display: flex;
  padding: 5px;
}

.move-left
{
  margin-right: auto;
}

.move-right
{
  margin-left: auto;
}

.move-bottom
{
  margin-top: auto;
}

.move-top
{
  margin-bottom: auto;
}

<div class="row"> 
  <div class="cell">
    <img class="move-right move-bottom" src="http://placekitten.com/300/200"/>
  </div>
  <div class="cell">
    <img class="move-left move-bottom" src="http://placekitten.com/200/200"/>
  </div>
</div>
<div class="row"> 
  <div class="cell">
    <img class="move-right move-top" src="http://placekitten.com/100/300"/>
  </div>
  <div class="cell">
    <img class="move-left move-top" src="http://placekitten.com/400/200"/>
  </div>
</div>

Answer 2

Попробуйте flexbox.https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

        .Aligner {
            display: flex;
            align-items: center;
            justify-content: center;
        } 
        .Aligner-item {
            max-width: 50%;
        }
        .flex-item img{
            vertical-align:top;
        }

    <div class="Aligner"> 
        <div class="Aligner-item">
            <div class="flex-item">
                <img src="http://placekitten.com/200/300" />
                 <img src="http://placekitten.com/300/300" />
            </div>
        </div>
    </div>
    <div class="Aligner"> 
        <div class="Aligner-item">
            <div class="flex-item">
            <img src="http://placekitten.com/100/300" />
            <img src="http://placekitten.com/200/200" />
          </div>
        </div>
    </div>