CSS Grid изображение не заполняет весь контейнер - PullRequest
Новая
       9

CSS Grid изображение не заполняет весь контейнер

2 голосов
/ 15 мая 2019

Я пытаюсь создать нерегулярную сетку, используя CSS-сетку, на основе этого кода: https://codepen.io/jasheng/pen/BvBvPN

Однако, когда я пытаюсь изменить значения диапазона для некоторых контейнеров на прямоугольники, цвет фона не заполняет весь контейнер (он только полностью заполняет квадраты)

Вы знаете, как я могу решить это? извините, если это вопрос новичка, я впервые использую сетки CSS

Я пытался изменить каждое значение как в .photoframe, так и в .gallery, и именно в этом заключается проблема. я также добавил высоту: 100%, подгонка объекта: обложка и размер фона: обложка, но безрезультатно. 

.gallery {
  display: grid;
  grid-template-columns: repeat(7,auto) ;
    grid-template-rows: repeat(1,1fr);
  grid-gap: .8vw;
  width: -webkit-calc(100% );
  width: -moz-calc(100%);
  max-width: 1000px;
  margin-top: -50px;
  margin-bottom: 40px;

}

.textfield {    
    position: relative;
    text-align: center;     
    cursor: pointer;
    background-color: black;
}
.textfield figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
    transition: all 0.8s ease-out;
    transition-delay: 0.2s;
  opacity: 0;
  text-align: center;
  color: white;
  font-size: 18px;
  cursor: pointer; 
}

.textfield:hover figcaption {
    transform: all 0.8s ease-out;
    opacity: 1;
}

.photoframe {
  position: relative;
  background-position: center center;
  background-color: yellow;
  cursor: pointer;
  opacity: 1;
  transition: .5s ease;
    background-size: cover;
    object-fit: cover;
    display: block;
}
.photoframe::after {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}
.textfield:hover .photoframe{
  opacity: 0.3;
}

.large{
  grid-column-end: span 2;
  grid-row-end: span 2; 
}
.medium{
  grid-column-end: span 2;
  grid-row-end: span 1; 
}
.small{
  grid-column-end: span ;
  grid-row-end: span 1; 
}
.large2{
  grid-column-end: span 3;
  grid-row-end: span 2; 
}



<div class="gallery">

                <div class="textfield large2">
                    <div class="photoframe" href="#"></div>
                    <figcaption>
                     </figcaption>
                </div>


                <div class="textfield small">
                    <div class="photoframe" style="" href="#"></div>
                    <figcaption>
                    </figcaption>
                </div>

                <div class="textfield small">
                    <div class="photoframe" style="" href="#"></div>
                    <figcaption>
                    </figcaption>
                </div>

                <div class="textfield large">
                    <div class="photoframe" href="#" ></div>
                    <figcaption>
                    </figcaption>
                </div>

                <div class="textfield medium">
                    <div class="photoframe" href="#"></div>
                    <figcaption>
                    </figcaption>
                </div>

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

1 Ответ

0 голосов
/ 15 мая 2019

Вы устанавливали высоту элементов .photoframe, используя псевдоэлемент ::after с padding-bottom:100%.Заполнение, установленное с процентом в нижней или верхней части элемента, установит этот отступ в процентах от ширины самого элемента, а не в процентах от родительского элемента.Вот почему вы видели квадраты, высота элементов была ограничена 100% ширины, соотношение 1: 1.

Я установил высоту: 100% для элемента .photoframe, чтобы он соответствовал всей сетке.пробел. 

.gallery {
  display: grid;
  grid-template-columns: repeat(7, auto);
  grid-template-rows: repeat(1, 1fr);
  grid-gap: .8vw;
  width: -webkit-calc(100%);
  width: -moz-calc(100%);
  max-width: 1000px;
}

.textfield {
  position: relative;
  text-align: center;
  cursor: pointer;
  background-color: black;
}

.photoframe {
  position: relative;
  background-position: center center;
  background-color: yellow;
  cursor: pointer;
  opacity: 1;
  transition: .5s ease;
  background-size: cover;
  object-fit: cover;
  display: block;
  height: 100%;
}

.photoframe::after {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}

.textfield:hover .photoframe {
  opacity: 0.3;
}

.large {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.medium {
  grid-column-end: span 2;
  grid-row-end: span 1;
}

.small {
  grid-column-end: span;
  grid-row-end: span 1;
}

.large2 {
  grid-column-end: span 3;
  grid-row-end: span 2;
}
<div class="gallery">

  <div class="textfield large2">
    <div class="photoframe"></div>
  </div>

  <div class="textfield small">
    <div class="photoframe"></div>
  </div>

  <div class="textfield small">
    <div class="photoframe"></div>
  </div>

  <div class="textfield large">
    <div class="photoframe"></div>
  </div>

  <div class="textfield medium">
    <div class="photoframe"></div>
  </div>

</div>
...