Картинная галерея HTML CSS

Question

• 1000 *

* {
  box-sizing: border-box;
}

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

.gallery img {
  width: 100%;
  height: auto;
}

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

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

<h1>Veckans deals!</h1>
<div class="responsive">
  <div class="gallery">
    <a href="vdeals_ett.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/DJI-Phantom-4-Photogrammetry-Drone-300x184.png" alt="Drönare" width="300" height="200"></a>
    <div class="des">Add a desciption of the picture</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a href="vbild_two.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/Holy-Stone-HS100-UAV-photography-drone-300x176.png" alt="Drönare" width="300" height="200"></a>
    <div class="des">Add a desciption of the picture</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a href="vbild_tre.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/Parrot-Bebop-2-drone-300x143.jpeg" alt="Drönare" width="300" height="200"></a>
    <div class="des">Add a desciption of the picture</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a href="vbild_fyra.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/GoPro-Hero-4-Silver-300x300.jpg" alt="Landskap" width="300" height="200"></a>
    <div class="des">Add a desciption of the picture</div>
  </div>
</div>

Answer 1

Невозможно заставить их все растягиваться при использовании float без установки фиксированной высоты для всех изображений. У вас есть три варианта.

1. Установите фиксированную высоту изображения и используйте object-fit: cover, чтобы оно выглядело так, как будто оно растягивается, в то время как на самом деле оно покрывает его
2. Используйте flexbox с flex-grow: 1 на изображении ( см. Этот пример , рекомендуется!)
3. Настройте все изображения так, чтобы они имели одинаковую ширину и высоту, если их можно сделать единообразными.

Answer 2

Ваши изображения не той же высоты / ширины, как те, что я нашел вас, когда сделал вам фрагмент. Итак, решите, какое направление важно, и используйте vh / vw и auto

Подробнее здесь

* {
  box-sizing: border-box;
}

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

.gallery img {
  width: auto;
  height: 15vh;
}

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

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

<h1>Veckans deals!</h1>
<div class="responsive">
  <div class="gallery">
    <a href="vdeals_ett.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/DJI-Phantom-4-Photogrammetry-Drone-300x184.png" alt="Drönare" width="300" height="200"></a>
    <div class="des">Add a desciption of the picture</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a href="vbild_two.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/Holy-Stone-HS100-UAV-photography-drone-300x176.png" alt="Drönare" width="300" height="200"></a>
    <div class="des">Add a desciption of the picture</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a href="vbild_tre.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/Parrot-Bebop-2-drone-300x143.jpeg" alt="Drönare" width="300" height="200"></a>
    <div class="des">Add a desciption of the picture</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a href="vbild_fyra.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/GoPro-Hero-4-Silver-300x300.jpg" alt="Landskap" width="300" height="200"></a>
    <div class="des">Add a desciption of the picture</div>
  </div>
</div>

Answer 3

Я уверен, что изображения имеют разное разрешение. Первые 2 изображения имеют одинаковое разрешение, например 3: 2. Последние 2 изображения имеют одинаковое разрешение, например 2: 1, но отличаются от первых 2 изображений. Пожалуйста, все равно попробуйте исправить разрешения изображений.