Как изменить размер элементов в соответствии с размером окна внутри гибкого бокса? - PullRequest
Новая
       157

Как изменить размер элементов в соответствии с размером окна внутри гибкого бокса?

0 голосов
/ 09 мая 2020

Я создал базовую c галерею изображений, используя flexbox в html / css. Сейчас на странице шесть изображений, и из-за гибкости они меняют конфигурацию с 1x6 на 2x3, на 3x2, на 4 + 2, на 5 + 1, на 6x1 в зависимости от размера окна. Теперь я хочу добавить еще 2 функции:

  1. Масштабирование не должно go превышать 3x2, чтобы сохранить симметрию веб-сайта. После 3x2 должен увеличиваться только размер изображений
  2. Размеры изображений также должны масштабироваться в соответствии с размером окна. Например, если я увеличиваю размер окна в конфигурации 2x3, размеры изображения также должны увеличиваться, пока не достигнем конфигурации 3x2. Это сделано для того, чтобы изображения занимали всю ширину окна (за исключением некоторых отступов). Я пробовал процентную ширину, но она действительно несовместима с flexbox.

Ниже приводится html: 

   


.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
   
    margin: 150px;
  } 

  .image
  {
    min-width: 30%;
    flex-grow: 1;
    transition: 0.2s;  
    padding: 0 2vw 4vw;
    margin: 20px 10px 20px;
  }


  
  
  
  
        
        <!--Image gallery-->
        <div class="container">
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
        </div>

1 Ответ

0 голосов
/ 10 мая 2020

Чтобы изображения масштабировались для заполнения контейнера, установите justify-content: stretch в строке div, установите flex-grow: 1 в div контейнера изображения и width: 100% на самом изображении. Установка min-width в div изображения около 30% сохранит его <= 3 изображения в строке. </p> 

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    align-items: center;
    margin: 150px 40px;
}

.image {
    padding: 0 20px 40px;
    min-width: 25%;
    flex-grow: 1;
}

img {
    width: 100%;
}

Вот скрипка с примером (трудно увидеть, как он работает с таким маленьким контейнером, но вы можете сказать, если вы уменьшите масштаб): https://jsfiddle.net/817o6r0f/

...