css grid изображения адаптивные - PullRequest
Новая
       23

css grid изображения адаптивные

0 голосов
/ 27 апреля 2018

Я пытаюсь сделать маленькую сетку изображений. На настольных компьютерах я хочу 3 изображения в столбце и на мобильных телефонах 2 изображения в столбце. У меня нет проблем с этим. Проблемы начинаются, когда я уменьшаю размер страницы до размера мобильного телефона. Изображения расположены в правильном порядке, но они не сжимаются, они сохраняют свой первоначальный размер, а изображение справа выходит за пределы сетки (вы не можете видеть половину этого изображения). Я пробовал max-width: 100%, width: 100% и т. Д. Не сработало. 

.sponsors1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media(max-width:768px) {
  .sponsors1 {
    grid-template-columns: 1fr 1fr;
    justify-self: center;
    grid-gap: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
    align-items: center;
    overflow:
  }
  .img1 {
    justify-self: center;
  }
  .img2 {
    justify-self: center;
  }
  .img3 {
    justify-self: center;
  }
}
<div class="sponsors1">
  <a href="#/" class="img1"><img src="images/#.png" alt=""></a>
  <a href="#" class="img2"><img src="images/#.jpg" alt=""></a>
  <a href="#" class="img3"><img src="images/#.png" alt=""></a>
</div>

1 Ответ

0 голосов
/ 27 апреля 2018

Вы должны установить свойства justify-self контейнеров изображений на stretch, а затем установить ширину изображения (НЕ их контейнеров) на 100%. 

        .sponsors1{
            display:grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
        @media(max-width:768px){
            .sponsors1{
                grid-template-columns: 1fr 1fr;
                justify-self:center;
                grid-gap: 8px;
                margin-top: 10px;
                margin-bottom: 20px;
                align-items:center;
                overflow: 
            }
            .img1{
                justify-self: stretch;
            }
            .img2{
                justify-self: stretch;
            }
            .img3{
                justify-self: stretch;
            }
        }
        img {
            width: 100%
        }
<div class="sponsors1">
   <a href="#" class="img1"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt=""></a>
   <a href="#" class="img2"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt=""></a>
   <a href="#" class="img3"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt=""></a>
</div>
...