Как идеально подогнать содержимое под свойство flex?

Question

У меня есть 2 контейнера, которые называются .grid.left и .grid.right.Каждый .grids, особенно .grid.left, имеет несколько динамических изображений, и эти .grids обертываются другим div, называемым .gallery.

. Проблема заключается в том, что я задаю поле для каждого из полей изображения, браузерделает небольшие пробелы внутри .gallery следующим образом:

Я ожидаю избавиться от этих пробелов от моего .gallery исделать изображения полностью подходящими независимо от того, сколько я установил margins на изображениях.

Я намеревался дать margins для галереи, выглядящей лучше.Я хочу оставить эти поля и расширить изображение .grid.right, чтобы оно помещалось только между изображением и .outer div.

. Есть ли какие-нибудь подходящие способы решения этой проблемы?

CodePen

Фрагменты кода:

* {
  margin: 0;
  padding: 0;
}

div,
section {
  position: relative;
}

.gallery {
  width: 1200px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.article {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.grid {
  height: 100%;
}

.left {
  width: 60%;
}

.inset-contents {
  width: 100%;
  height: 50%;
}

.top {
  margin-bottom: 1rem;
  background-image: url('https://imgur.com/3ozQvk9.jpg');
  padding-bottom: 50%;
}

.bottom {
  display: flex;
  flex-flow: row;
}

.inner-contents {
  width: 50%;
}

.first {
  background-image: url('https://imgur.com/tOMRVDi.jpg');
  padding-bottom: 50%;
  margin-right: .5rem;
}

.second {
  background-image: url('https://imgur.com/4oewNdx.jpg');
  padding-bottom: 50%;
  margin-left: .5rem;
}

.right {
  width: 40%;
  background-image: url('https://imgur.com/7gB1jHR.jpg');
  padding-bottom: 60%;
  align-content: stretch;
  margin-left: 1rem;
}

.img {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

<div class="gallery">
  <div class="article">
    <div class="grid left">
      <a class="inset-contents top img"></a>
      <div class="inset-contents bottom">
        <a class="inner-contents first img"></a>
        <a class="inner-contents second img"></a>
      </div>
    </div>
    <a class="grid right img"></a>
  </div>
</div>

Answer 1

Проблема заключается в том, как вы управляете высотой элемента right в галерее изображений:

• пропустите настройку height: 100% (из-за класса grid) иpadding-bottom - вы можете переопределить это, добавив height: auto к элементу right,

• удалить align-items: center из элемента article и разрешить значение по умолчанию align-items: stretch длявзять на себя - это будет растянуть и сопоставить высоту right элемента с left.

См. демонстрацию ниже:

* {
  margin: 0;
  padding: 0;
}

div,
section {
  position: relative;
}

.gallery {
  width: 1200px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.article {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  /*align-items: center;*/
}

.grid {
  height: 100%;
}

.left {
  width: 60%;
}

.inset-contents {
  width: 100%;
  height: 50%;
}

.top {
  margin-bottom: 1rem;
  background-image: url('https://imgur.com/3ozQvk9.jpg');
  padding-bottom: 50%;
}

.bottom {
  display: flex;
  flex-flow: row;
}

.inner-contents {
  width: 50%;
}

.first {
  background-image: url('https://imgur.com/tOMRVDi.jpg');
  padding-bottom: 50%;
  margin-right: .5rem;
}

.second {
  background-image: url('https://imgur.com/4oewNdx.jpg');
  padding-bottom: 50%;
  margin-left: .5rem;
}

.right {
  width: 40%;
  background-image: url('https://imgur.com/7gB1jHR.jpg');
  /*padding-bottom: 60%;
  align-content: stretch; */
  margin-left: 1rem;
  height: auto; /* added */
}

.img {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

<div class="gallery">
  <div class="article">
    <div class="grid left">
      <a class="inset-contents top img"></a>
      <div class="inset-contents bottom">
        <a class="inner-contents first img"></a>
        <a class="inner-contents second img"></a>
      </div>
    </div>
    <a class="grid right img"></a>
  </div>
</div>

Answer 2

Нашел решение. Согласно этой статье мне нужно было добавить flex-shrink: 0; в .right следующим образом:

  * {
    margin: 0;
    padding: 0;
  }
  div, section {
    position: relative;
  }
  .gallery {
    width: 1200px;
    height: 100%;
    border: 1px solid black;
    box-sizing: border-box;
  }
  .article {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .grid {
    height: 100%;
  }
  .left {
    width: 60%;
  }
  .inset-contents {
    width: 100%;
    height: 50%;
  }
  .top {
    margin-bottom: 1rem;
    background-image: url('https://imgur.com/3ozQvk9.jpg');
    padding-bottom: 50%;
  }
  .bottom {
    display: flex;
    flex-flow: row;
  }
  .inner-contents {
    width: 50%;
  }
  .first {
    background-image: url('https://imgur.com/tOMRVDi.jpg');
    padding-bottom: 50%;
    margin-right: .5rem;
  }
  .second {
    background-image: url('https://imgur.com/4oewNdx.jpg');
    padding-bottom: 50%;
    margin-left: .5rem;
  }
  .right {
    width: 40%;
    background-image: url('https://imgur.com/7gB1jHR.jpg');
    padding-bottom: 60%;
    align-content: stretch;
    margin-left: 1rem;
    flex-shrink: 0;
  }
  .img {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

    <div class="gallery">
      <div class="article">
        <div class="grid left">
          <a class="inset-contents top img"></a>
          <div class="inset-contents bottom">
            <a class="inner-contents first img"></a>
            <a class="inner-contents second img"></a>
          </div>
        </div>
        <a class="grid right img"></a>
      </div>
    </div>

Answer 3

привет Если я прав, вы просто хотите избавиться от пробела и хотите расширить изображения.Вы можете проверить это.

          * {
            margin: 0 auto;
            padding: 0 auto;
          }
          div, section {
            position: relative;
          }
          .gallery {
            width: 1200px;
            height: 100%;
            border: 1px solid black;
            box-sizing: border-box;
          }
          .article {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: row;
            align-items: center;
          }
          .grid {
            height: 100%;
          }
          .left {
            width: 60%;
          }
          .inset-contents {
            width: 100%;
            height: 50%;
          }
          .top {
        
            background-image: url('https://imgur.com/3ozQvk9.jpg');
            padding-bottom: 50%;
          }
          .bottom {
            display: flex;
            flex-flow: row;
          }
          .inner-contents {
            width: 50%;
          }
          .first {
            background-image: url('https://imgur.com/tOMRVDi.jpg');
            padding-bottom: 50%;
          
          }
          .second {
            background-image: url('https://imgur.com/4oewNdx.jpg');
            padding-bottom: 50%;
      
          }
          .right {
            width: 40%;
            background-image: url('https://imgur.com/7gB1jHR.jpg');
            padding-bottom: 60%;
            align-content: stretch;

          }
          .img {
            display: block;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
          }

        <div class="gallery">
          <div class="article">
            <div class="grid left">
              <a class="inset-contents top img"></a>
              <div class="inset-contents bottom">
                <a class="inner-contents first img"></a>
                <a class="inner-contents second img"></a>
              </div>
            </div>
            <a class="grid right img"></a>
          </div>
        </div>

Вам просто нужно удалить все поля, которые вы положили в дочерний элемент .gallery.