Сделать изображение подходящим CSS Grid - PullRequest
Новая
       6

Сделать изображение подходящим CSS Grid

0 голосов
/ 26 мая 2018

У меня есть сетка, в которой я размещаю изображения, но они не заполняют все предоставленное им пространство.

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

Код такой: 

 <section class="wrapper">
   <div class="one">
     <img class="img" src="images/lorem/ipsum.jpg" alt="">
   </div>

   <div class="two">
     <img class="img" src="images/lorem/ipsum2.jpg" alt="">
   </div>

   <div class="three">
     <img class="img" src="images/lorem/ipsum3.jpg" alt="">
   </div>
 </section>

 .wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   grid-auto-rows: minmax(150px, auto);
   grid-gap: 20px;
   height: 100vh;
 }

.one {
  grid-column: 2 / 7;
  grid-row: 1 / 3;
}

.two {
  grid-column: 2 / 5;
  grid-row: 3 / 4;
} 

.three {
  grid-column: 5 / 7;
  grid-row: 3 / 4;
}

.img {
  width: 100%;
}

enter image description here

Как я могу это исправить

Ответы [ 3 ]

0 голосов
/ 26 мая 2018

Попробуйте background-size: 100% 100% и background-size: cover или fit

0 голосов
/ 13 февраля 2019

добавьте один div, чтобы обернуть ваше изображение, затем установите стиль изображения на .img {max-width: 100%;высота: авто}

0 голосов
/ 26 мая 2018

Это нормально, поскольку изображения сохраняют свои пропорции.

Хороший способ решить эту распространенную проблему - установить изображение в качестве параметра CSS-фона в элементе div вашей сетки вместо * 1003.* тег в html, например background: url ('http://link -to-your-image / image.jpg ') и используйте background-size: cover; для того же элемента.

ThisКстати, картина заполнит все пространство, которое ей приписано.

...