Блог

Главная - Вопросы по программированию - отображение галереи изображений с основным изображением и изображениями меньшего размера

отображение галереи изображений с основным изображением и изображениями меньшего размера

#html #css

#HTML #css

Вопрос:

У меня есть галерея изображений, но я не могу отобразить ее так, как я хочу. Я бы хотел, чтобы основное изображение было больше, а остальные отображались в правой части основного изображения, друг под другом. Код:

 <div class="gallery">
<a href="images/1.jpg">
<img class="card-img-top" src="images/1.jpg" alt="Fő kép" style="width: 50%;">

<div class="image-container">
<img src="images/1.jpg" alt="Egy kép a hirdetésről">
<img src="images/motor.jpg" alt="Egy kép a hirdetésről">
<img src="images/motor2.jpg" alt="Egy kép a hirdetésről">
<img src="images/2.jpg" alt="Egy kép a hirdetésről">
</div>
</a>

<a href="images/motor.jpg"></a>
<a href="images/motor2.jpg"></a>
<a href="images/2.jpg"></a>
<a href="images/1.jpg"></a>
</div>
  
 .image-container {
    display: flex;
    overflow-x: auto;
}

.image-container img {
    max-width: 20vh;
}

Вот как это выглядит atm:
изображение

и это то, как это должно выглядеть: изображение 2

Ответ №1:

 .gallery {width: 100%;}
.gallery a {
display: flex;
}
.gallery img{width: 80%; height: auto;}
.image-container {
display: flex;
flex-direction: column;
margin-left: 11px;
width: 20%;
height: 300px;
overflow: scroll;
}

.image-container img {
margin: 11px 0 0;}
.image-container img:first-child {
margin: 0 0 0;}  
 <div class="gallery">
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg">
<img class="card-img-top" src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Fő kép">

<div class="image-container">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
</div>
</a>

<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
</div>

Я использовал flex css для реализации вашего дизайна.

Комментарии:

1. Большое вам спасибо за ваш ответ. Единственная проблема заключается в том, что это снижает разрешение основного изображения. i.postimg.cc/PqJrLJMs/image.png Можно ли сделать небольшие изображения прокручиваемыми, чтобы основным изображением могло быть исходное изображение?