Изображение, выпадающее из родительского элемента div в элементе CSS Grid (только Firefox) - PullRequest
Новая
       24

Изображение, выпадающее из родительского элемента div в элементе CSS Grid (только Firefox)

0 голосов
/ 06 марта 2019

Есть ли лучший способ добиться центрирования заголовка текста на изображении, которое вложено в элемент CSS Grid (и может быть «justify-items: start / end / etc»)

Мне нравится, как пример рендеринга в Safari & Chrome, но в Firefox изображение выливается из родительского div. Любая помощь будет принята с благодарностью! Спасибо:)

Пример Safari / Chrome

Пример Firefox (изображение выплескивается из родительского div)

https://codepen.io/jcha4849/pen/ywgMde

<body>
  <div class="container-main"><article id="post-number-1">
       <div class="standard-container-1">
    <div class="caption-1"><a href="/home">CENTERED CAPTION 1</a></div>
    <img src="https://images.unsplash.com/photo-1516472096803-187d3339b36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"></div>
    </article>

    <article id="post-number-2">
       <div class="standard-container-1">
    <div class="caption-1"><a href="/home">CENTERED CAPTION 2</a></div>
    <img src="https://images.unsplash.com/photo-1516472096803-187d3339b36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"></div>
    </article>


  </div>
    <!-- container-main -->

</body>

<style>
body {
    padding: 0;
    margin: 0;
}

.container-main {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(10, 9vw);
  grid-auto-rows: 9vw;
  margin: 0 0 0px 0;
  padding: 0;
  min-width: 0; 
  padding: 5vw 5vw 15vw 5vw;    
  min-width: 0; 
  background-color: teal;
}

.container-main  article {
  border: 3px solid black;  
}

.container-main article .standard-container-1 {
  position: relative;
  max-height: 100%;
  max-width: 100%;
}

.container-main article .standard-container-1 .caption-1 {
    min-width: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


.container-main article .standard-container-1 .caption-1 a {
  color: #0f0;
  font-family: sans-serif;
}


.container-main article .standard-container-1 img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
}

.container-main article#post-number-1 {
    display:grid;
    align-items: start;
    justify-items: start;
    grid-column: 1 / 4;  
    grid-row:    1 / 4 ;
}

.container-main article#post-number-2 {
    display:grid;
    align-items: start;
    justify-items: end;
    grid-column: 8 / 11;  
    grid-row:    1 / 4 ;
}

</style>
...