Изображение внутри сетки растягивает размер элемента сетки непропорционально другим - PullRequest
Новая
       17

Изображение внутри сетки растягивает размер элемента сетки непропорционально другим

0 голосов
/ 14 октября 2018 

#hi {
      display: grid;
    grid-template-columns: auto auto;
}

#hi > div {
      border: 1px solid red;
    min-height: 300px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}
<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

ПРИМЕЧАНИЕ - изображение не работает корректно при вставке - CODEPEN URL работает: https://codepen.io/anon/pen/vVeWpL

Я новичок в сетках и люблю их такдалеко, но я очень запутался в этой проблеме.По неизвестной причине сетка растягивается изображением, несмотря на то, что она имеет ширину 100%.Даже если я изменю ширину на 10%, сетка все еще растянута.Я также попытался убедиться, что родительский элемент имеет ширину 100%, только добавив ширину 100%, но это также не удается.

Может ли кто-нибудь помочь сделать ширину сетки 50/50 и объяснить, что произошло?

1 Ответ

0 голосов
/ 14 октября 2018

Может ли кто-нибудь помочь сделать ширину сетки 50/50 и объяснить, что произошло?

Для решения первой части вашего вопроса / запроса;чтобы разделить сетку на два столбца одинакового размера, вы можете просто указать дискретные размеры, например, вместо: 

grid-template-columns: auto auto;

Вместо этого вы можете использовать: 

grid-template-columns: 1fr 1fr;


#hi {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#hi>div {
  border: 1px solid red;
  min-height: 300px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}
<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

JS Fiddle demo .

Или используйте функцию repeat(), чтобы сделать то же самое: 

grid-template-columns: repeat(2, 1fr);


#hi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#hi>div {
  border: 1px solid red;
  min-height: 300px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}
<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

Демонстрация JS Fiddle .

Пока я использовал блок fr в приведенных выше примерах, другие измеренияможет, конечно, использоваться (например, 50% 50% / repeat(2, 50%) и т. д.);1fr просто выделяет дробную единицу, определяемую предыдущим числом, доступного пространства.

Что касается последней части вашего вопроса, я могу только предложить наблюдение относительно того, что произошло - но без ссылкик спецификациям - но я считаю, что использование ключевого слова auto позволило содержимому grid-item (<div>, содержащему <img>) диктовать размер этого элемента.Впрочем, почему он дал конечный результат, боюсь, я не знаю (однако, я подозреваю, что другие предложат гораздо лучшее объяснение).

Ссылка:

...