Проблема с отзывчивостью галереи изображений Flexbox

ProgramBox

Проблема с отзывчивостью галереи изображений Flexbox

Post author:admin
Запись опубликована:16 января, 2022
Post category:Вопросы по программированию

#html #css #image #flexbox #responsiveness

Вопрос:

Я на пути к созданию отзывчивой галереи изображений с помощью flexbox. Для этого моя структура html выглядит следующим образом:

 <main class="image-container">
    <div class="image-wrapper">
        <img src="#">
    </div>
    <div class="image-wrapper">
        <img src="#">
    </div>
    ....so on many 
</main>

Ниже приведен мой фрагмент css:

 .image-container {
        width: 90%;
       height: 2480px;
        margin: 20px auto 0px;
        background: rgba(209, 217, 223, 0.705);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-evenly;
        align-content: space-evenly;
        position: relative;            
   }
  .image-wrapper {
       width: 30%;
       margin: 0px auto 8px;
       flex-shrink: 0;
   }
    img{
        width: 100%;  
        height: 100%;
   }

Теперь, чтобы сделать это отзывчивым, я должен использовать медиа-запросы. Предположим, ширина экрана моего ноутбука составляет 1280 пикселей. И я пытаюсь понять 3 columns of images into 2 column at 760px breakpoint . Проблема в том , что, когда я пытаюсь уменьшить размер экрана, внезапно в 1180 пикселей в последнем столбце образуется неудобное пространство. Я понимаю, у меня жесткая высота контейнера 2480 пикселей . Из-за этого мой рост поддерживается постоянным и, как width is 90% изображение уменьшается, и изображение 3-го столбца добавляется в другой столбец. Я старался изо всех сил, поэтому любые предложения приветствуются. Есть ли что-то, что можно сделать в html или css? Мне жаль, если у вас возникли проблемы с пониманием сценария.

Ответ №1:

Для решения такого рода проблем вам следует добавить коды медиа-запросов в свой css-файл. Если вы хотите показать 3 изображения на больших экранах, которые вы должны удалить flex-direction: row , .image-container чтобы image-wrappers они могли быть рядом. Когда экран сжимается, они должны обернуться. Я добавляю ссылку на код здесь, чтобы вы могли просмотреть ее. Если у вас есть какие-либо другие вопросы. Я могу ответить на них. https://codepen.io/atesirem/pen/ExmPgdP

 .image-container {
        width: 90%;
        margin: 20px auto 0px auto;
        padding:20px;
        background: rgba(209, 217, 223, 0.705);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-content: space-evenly;
        position: relative;            
   }

  .image-wrapper {
       width: 30%;
       margin: 0px auto 8px;
       flex-shrink: 0;
   }
    img{
        width: 100%;  
        height: auto;
   }

@media screen and (max-width:991px) {
  .image-container {
        flex-wrap: wrap;
   }
}
@media screen and (max-width:768px) {
  .image-container {
                
   }
  .image-wrapper {
       width: 45%;
   }
}
@media screen and (max-width:500px) {
  .image-container {
        flex-direction: column;
                 
   }
  .image-wrapper {
       width: 90%;
   }
}

1. большое вам спасибо за вашу помощь. Теперь я могу сортировать сценарии, где лучше использовать какие свойства. Причина, по которой я использовал flex-direction: column , заключалась в том, что у меня были изображения разной высоты, и я не хотел, чтобы все они были одинакового размера, чтобы правильно выровняться. Вот ссылка на мою кодовую ручку. Я использовал ваш css сверху, а мой прокомментирован ниже. Проверьте и мой тоже. codepen.io/Biebk/pen/KKmKpVy

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

Ответ №2:

Вот что я сделал, чтобы сделать это лучше. Я надеюсь, что смогу вам немного помочь.

         .image-container {
            width: 90%;
            height: 2800px;
            min-height:fit-content;
          scroll-behavior:smooth;
          overflow:scroll;
          max-width:1280px;
            margin: 20px auto 20px auto;
            padding: 20px 0px;
            background: rgba(209, 217, 223, 0.705);
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: flex-start;
            align-content: space-evenly;
            position: relative;

            
       }
 @media screen and (max-width:500px) {
  .image-container {
        flex-direction: column;
        max-height: inherit;
                 
   }
  .image-wrapper {
       width: 90%;
   }
}
@media screen and (max-width:500px) {
  .image-wrapper {
       width: 90%;
   }
}

Ответ №3:

Здесь я добавляю пример, который отображает изображения разной высоты и его отзывчивость

 /*
* The function calc is working wrong in case calculations in the Firefox
*/

.photobox{
  display: inline-block;
}

.photobox__previewbox{
  position: relative;
  overflow: hidden;
}

.photobox__preview{
  display: block;
  max-width: 100%;
}

.photobox__previewbox:before{
  content: "";
}

/* type 1 */

.photobox_type1 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  border-radius: 50%;
  
  position: absolute;
  top: 0;
  left: 0;

  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
  will-change: transform;
  transform: scale(0);
}

.photobox_type1:hover .photobox__previewbox:before{
  transform: scale(2);
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transition-delay: 0s;
}

.photobox_type1 .photobox__label{
  width: 50%;
  transform: translate(-200%, -50%);
  transition: transform var(--photoboxAnimationDuration, .4s) ease-out;
  will-change: transform;
  
  position: absolute;
  top: 50%;
  left: 15%;
}

.photobox_type1:hover .photobox__label{
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transform: translate(0, -50%);
}

/* type 2*/

.photobox_type2 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  
  border-radius: 50%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  
  position: absolute;
  top: 0;
  right: 0;

  transition: transform var(--photoboxAnimationDuration, .2s) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
  will-change: transform;
  transform: scale(0);
}

.photobox_type2:hover .photobox__previewbox:before{
  transform: scale(2);
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transition-delay: 0s;
}

.photobox_type2 .photobox__label{
  width: 50%;
  text-align: right;
  
  transform: translate(200%, -50%);
  transition: transform var(--photoboxAnimationDuration, .4s) ease-out;
  will-change: transform;
  
  position: absolute;
  top: 50%;
  right: 15%;
}

.photobox_type2:hover .photobox__label{
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transform: translate(0, -50%);
}

/* type 3 */

.photobox_type3 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;

  transition: transform var(--photoboxAnimationDuration, .4s) ease;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}

.photobox_type3:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%) scale(4);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2);
}

.photobox_type3 .photobox__label{
  width: 95%;
  text-align: center;
  
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--photoboxAnimationDuration, .4s) ease-out;
  will-change: opacity;
  
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
}

.photobox_type3:hover .photobox__label{
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
  opacity: 1;
}

.photobox_type3 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1);
}

.photobox_type3:hover .photobox__preview{
  transform: scale(1.2);
}

/* type 4 */

.photobox_type4 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;

  transition: transform var(--photoboxAnimationDuration, .4s) ease;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}

.photobox_type4:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%) scale(4);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2);
}

.photobox_type4 .photobox__label{
  width: 95%;
  text-align: center;
  
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--photoboxAnimationDuration, .4s) ease-out;
  will-change: opacity;
  
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
}

.photobox_type4:hover .photobox__label{
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
  opacity: 1;
}

.photobox_type4 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) translate(0, 0);
}

.photobox_type4:hover .photobox__preview{
  transform: scale(1.2) translate(4%, 4%);
}
/*
* demo styles for photobox
*/

.photobox{
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  width: 33.33333%;
  --photoboxOverlay: rgba(72, 27, 174, .7);
  /*--photoboxAnimationDuration: .5s;*/
}

@media screen and (max-width: 480px){
  .photobox{
    width: 100%;
  }
}

/*
=====
DEMO
=====
*/

@media (min-width: 768px){

  html{
    font-size: 62.5%;
  }
}

@media (max-width: 767px){

  html{
    font-size: 50%;
  }
}



a{
  text-decoration: none;
  color: inherit;
}

a:hover, a:focus{
  text-decoration: underline;
}

.page{
  flex-grow: 1;
  order: 1;
}

.page__container{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

 <div class="page">
  <div class="page__demo">
    <div class="page__container">
      <div class="photobox photobox_type1">
        <div class="photobox__previewbox">
          <img src="https://profiladv.ro/wp-content/uploads/2017/03/spring-awakening-1197602_960_720.jpg" class="photobox__preview" alt="Preview">
          <span class="photobox__label">Spring and beauty of nature</span>
        </div>
      </div>
      <div class="photobox photobox_type2">
        <div class="photobox__previewbox">
          <img src="https://www.cesarsway.com/wp-content/uploads/2015/06/Spring-health-tips.jpg" class="photobox__preview" alt="Preview">
          <span class="photobox__label">Looks so adorable</span>
        </div>
      </div>
      <div class="photobox photobox_type3">
        <div class="photobox__previewbox">
          <img src="https://headtopics.com/images/2019/8/3/independent/fear-and-persecution-in-pakistan-s-hazara-community-1157503460163690496.webp" class="photobox__preview" alt="Preview">
          <span class="photobox__label">Chashm badami</span>
        </div>
      </div>
      <div class="photobox photobox_type4">
        <div class="photobox__previewbox">
          <img src="https://www.sidetracked.com/wp-content/uploads/2014/09/wakhan-corridor-JanBakker.jpg" class="photobox__preview" alt="Phot otaken by Jan Bakker">
          <span class="photobox__label">A Short Walk in the Other Asia</span>
        </div>
      </div>            
    </div>  
  </div>
</div>

Метки: Проблема с отзывчивостью галереи изображений Flexbox