Сетка изображения с автоматическим масштабированием только в HTML и CSS

Question

Я пытался создать адаптивную сетку для автоматического масштабирования изображения, чтобы показывать рекламу на нашем веб-сайте.Я использовал это как справку - W3Schools-ImageGridMaker

Исходя из этого, я пытался 4 дня, чтобы придумать этот кусок кода.

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  display: block;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

div.boxed {
  border: 5px solid red;
  width: 100%;
  height: auto;
  overflow: auto;
}

<div class="boxed">

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="https://tnilive.com" onclick="window.open('https://www.google.com'); window.open('https://www.yahoo.com');"> <img src="https://i.imgur.com/UgPbxk2.jpg" alt="Shiva1"></a>
    </div>
  </div>


  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="https://tnilive.com" onclick="window.open('https://www.google.com'); window.open('https://www.yahoo.com');"> <img src="https://i.imgur.com/ColLeDr.png" alt="Shiva2"></a>
    </div>
  </div>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="https://tnilive.com" onclick="window.open('https://www.google.com'); window.open('https://www.yahoo.com');"> <img src="https://i.imgur.com/gVjcLg2.jpg" alt="Shiva3"></a>
    </div>
  </div>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="https://tnilive.com" onclick="window.open('https://www.google.com'); window.open('https://www.yahoo.com');"> <img src="https://i.imgur.com/nxGxovl.png" alt="Shiva4"></a>
    </div>
  </div>

</div>

Этот код является адаптивным, и на мобильных устройствах у меня нет проблем, потому что он выглядит аккуратно, заполняя всю площадь.Но если вы посмотрите на него на рабочем столе, он вставляет пустое пространство под некоторыми фотографиями, которые не соответствуют высоте.Я использую несколько URL-адресов и могу представить их в виде списка, чтобы эта область размером 1280X200 пикселей на рабочем столе была аккуратно заполнена изображениями разных размеров.Я попытался изучить свободное пространство и кучу других jsfiddles и ручек, но не смог добиться того, как удалить пробел и сделать эту конкретную коробку хорошо выглядящей.Спасибо.

Answer 1

За мои комментарии - я бы выбрал решение flexbox, в котором используется подгонка объекта (с полифилом для ie):

.container {
  display: flex;
  flex-direction: row;   /* default value so optional - lines children in a row */
  flex-wrap: wrap;        /* allows children to wrap */
  justify-content: space-between; /* space children evenly over row */
}

.responsive {
  flex-basis: 25%;  /* makes the width 25% */
  
  /* if you don't want a fixed height image, I would use the padding top trick for aspect ratio divs */
  position: relative;
  padding-top: 30%;
}

.responsive img {
  position:absolute;
  display: block;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  object-fit:cover;
}


@media only screen and (max-width: 700px) {
  .responsive {
    flex-basis: 50%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    flex-basis: 100%;
    padding-top: 50%;
  }
}

<div class="container">
  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="https://tnilive.com" onclick="window.open('https://www.google.com'); window.open('https://www.yahoo.com');"><img src="https://www.fillmurray.com/400/600" alt="Shiva3"></a>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="https://tnilive.com" onclick="window.open('https://www.google.com'); window.open('https://www.yahoo.com');"><img src="https://www.fillmurray.com/400/400" alt="Shiva3"></a>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="https://tnilive.com" onclick="window.open('https://www.google.com'); window.open('https://www.yahoo.com');"><img src="https://www.fillmurray.com/400/900" alt="Shiva3"></a>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="https://tnilive.com" onclick="window.open('https://www.google.com'); window.open('https://www.yahoo.com');"><img src="https://www.fillmurray.com/400/700" alt="Shiva3"></a>
    </div>
  </div>
</div>