Изображение в сетке превышает исходное пространство <div> - PullRequest
Новая
       10

Изображение в сетке превышает исходное пространство <div>

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

Я разделил свой элемент .grid на 4 столбца и 4 строки, используя CSS-сетки.Я настроил изображение так, чтобы оно было в 1-м столбце и 4-м ряду.Но, как вы можете видеть, изображение человека превышает исходную высоту .grid <div>, оно перекрывает и переходит поверх другого элемента под ним.

Как сохранить изображение в исходном размере.grid и выровнять его по 1-му столбцу и 4-й строке?(Я также хочу, чтобы он придерживался верхней части этого черного элемента, но не перекрывал его). 

.grid {
    height: 1000px;
    width: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 25% 25% 25% 25%;
}

#image {
    grid-column: 1;
    grid-row: 4;
}

.box {
    background: black;
    height: 500px;
}
<div class="grid">
    <div id="image">
      <img src="https://futhead.cursecdn.com/static/img/14/players/176619.png"/>
    </div>
</div>

<div class="box"></div>

Ответы [ 3 ]

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

Вам нужно ограничить <img>, чтобы он оставался в пределах родительской высоты и ширины. 

* {
  margin: 0;
  padding: 0;
}

.grid {
  height: 1000px;
  width: 100%;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
}

#image {
  grid-column: 1;
  grid-row: 4;
}



.box {
  background: black;
  height: 500px;
}


/* Added */

#image>img {
    width: 100%;
    height: 100%;
}
<div class="grid">
  <div id="image">
    <img src="https://futhead.cursecdn.com/static/img/14/players/176619.png" />
  </div>
</div>

<div class="box"></div>
0 голосов
/ 27 мая 2018

Поскольку высота контейнера составляет 1000 пикселей, а для каждой строки установлено значение 25%, высота каждой строки составляет 250 пикселей.

С помощью этой информации вы можете установить высоту изображения, сохраняя при этомсоотношение сторон и заполнение всего поля свойством object-fit. 

.grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  height: 1000px;
}

#image {
  grid-column: 1;
  grid-row: 4;
}

#image > img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.box {
  background: black;
  height: 500px;
}
<div class="grid">
  <div id="image">
    <img src="https://futhead.cursecdn.com/static/img/14/players/176619.png" />
  </div>
</div>
<div class="box"></div>
0 голосов
/ 27 мая 2018

Применить max-width:100% к img, чтобы он мог принимать ширину ширины столбца 

.grid {
  height: 1000px;
  width: 100%;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
}

#image {
  grid-column: 1;
  grid-row: 4;
}

.box {
  background: black;
  height: 500px;
}

#image img {
  max-width: 100%;
}
<div class="grid">
  <div id="image">
    <img src="https://futhead.cursecdn.com/static/img/14/players/176619.png" />
  </div>
</div>

<div class="box"></div>
...