CSS-Grid: автоматическая сетка-шаблон-строк с различными результатами в Safari, Firefox и Chrome - PullRequest
Новая
       20

CSS-Grid: автоматическая сетка-шаблон-строк с различными результатами в Safari, Firefox и Chrome

1 голос
/ 05 ноября 2019

Я пытаюсь создать адаптивный квадрат (в сером цвете) с динамическим содержимым, в котором изображение (желтое) масштабируется в зависимости от длины текста / высоты элемента содержимого под изображением (синего цвета). Хотя в Chrome это прекрасно работает, Safari и Firefox предлагают два совершенно разных выхода, как показано ниже. Кажется, что неправильно масштабировать изображение или игнорировать автоматическую высоту строки сетки и размещать содержимое вне Square-Div.

Что мне здесь не хватает? 

html,
body {
  height: 100%;
}

.wrapper {
  width: 25%;
}

.square {
  height: 0;
  padding-bottom: 100%;
  position: relative;
}

.grid {
  display: grid;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  grid-template-rows: auto min-content;
  grid-template-areas: 
   "cover" 
   "content";
  background: grey;
}

.cover {
  grid-area: cover;
  height: 100%;
  width: 100%;
}

.image {
  height: 100%;
  border: 1px solid red;
}

.content {
  grid-area: content;
  background: blue;
  color: white;
}
<div class='wrapper'>
  <div class='square'>
    <div class='grid'>
      <div class='cover'><img src='https://i.imgur.com/I9UFWodl.png' class='image'></div>
      <div class='content'>Dynamic Text<br>Even more Dynamic Text</div>
    </div>
  </div>
</div>

Скриншоты

Хром

Firefox

Safari

Я пробовал это на OSX, все браузеры являются текущими версиями.

Уже найдено одно решение, которое использует изображение какbackground-image для .cover, но, к сожалению, мне нужно встроенное изображение (чтобы нанести тень и т. д.), поэтому любая помощь очень ценится. Благодарю.

Codepen: https://codepen.io/rx2347/pen/oNNqvNV

Только что заметил: это прекрасно работает, если размер квадрата становится больше данного изображения. Он увеличит изображение и сохранит пропорции квадрата, но не уменьшит масштаб и не сделает то же самое ...

Еще одно наблюдение: Safari, похоже, игнорирует автоматическое значение для grid-template-смещает и масштабирует грид-контейнер, если содержимое превышает грид. В то время как Chrome и Firefox придерживаются квадрата размером 400x400 пикселей и применяют какое-то переполнение: скрытое для автоматической строки, Safari увеличивает его до 800 пикселей. Даже с переполнением: скрыто для контейнера .cover ... 

.grid {
  height:400px;
  width:400px;
  display: grid;
  background:grey;
  grid-template-rows: auto min-content;
  grid-template-areas: "cover"
                       "info";
  overflow:hidden;
}

.cover {
  grid-area:cover;
  border:5px solid green;
  height:100%;
  overflow:hidden;
}

.content {
  background:red;
  height:800px;
}

.info {
  grid-area:info;
  color:white;
  background:blue;
}
<div class='grid'>
  <div class='cover'>
    <div class='content'>
    </div>
    
  </div>
  <div class='info'>text</div>
</div>

1 Ответ

0 голосов
/ 06 ноября 2019

Решил это, добавив еще один .container и переполнение: скрытый в div .cover.

Не уверен, почему это необходимо добавить в Safari, чтобы он соответствовал всем элементам div внутри квадрата, хотя на самом деле это так и есть. переполнения нет.

В любом случае. Использовать переполнение: скрыто для Safari при использовании grid-template-row: auto min-content;для автоматического ряда. 

  html,body {
    height:100%;
  }

  .wrapper {
    width:50%;
  }

  .square {
    position:relative;
    width: 100%;
  }

  .square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
    background:green;
  }

  .container {
    position:absolute;
    width:100%;
    height:100%;
}

  .grid {
    display:grid;
    position:absolute;
    height:100%;
    width:100%;
    grid-template-rows: auto min-content;
    grid-template-columns: 100%;
    grid-template-areas:
      "cover"
      "content";
    background:grey;
  }

  .cover {
    grid-area:cover;
    display:block;
    overflow:hidden;
  }

  .image {
    max-height:100%;
    height:100%;
    border:1px solid red;
  }

  .content {
    grid-area:content;
    background:blue;
    color:white;
  }
<div class='wrapper'>

<div class='square'>
  <div class='container'>
    <div class='grid'>
      <div class='cover'><img src='https://i.imgur.com/I9UFWodl.png' class='image'></div>
      <div class='content'>Dynamic Content<br>Can even be multiple lines and the content will stay within the Square</div>
    </div>
  </div>
</div>

</div>
...