CSS ширина ячейки сетки в Firefox больше, чем ее содержимое - PullRequest
Новая
       31

CSS ширина ячейки сетки в Firefox больше, чем ее содержимое

0 голосов
/ 07 марта 2020

У меня есть div с ростом: 15vw; Я хочу поместить 4 изображения в этот блок (каждый размер изображения составляет 1920 * 1080 пикселей), если я использую приведенный ниже код, все в chrome в порядке, но в Firefox каждый размер изображения составляет 195 * 110 (это ОК) но ширина каждой ячейки сетки составляет 1920 пикселей! Я хочу, чтобы ширина каждой ячейки была равна ширине изображения.

https://codepen.io/arsenal2323/pen/yLNPoXV

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background-color: green;
  height: 15vw;
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  gap: 10px;
}

.image {
  height: 100%;
}
<div class="container">
  <img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_f0297eacbfb4266f311a8cb4137e4ef8b7cdd00b.jpg?t=1582550242" alt="" class="image">
  <img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_bd875dbf865e70cda73a7cd6b132cadacfdb768b.jpg?t=1582550242" alt="" class="image">
  <img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_7ef17676a804b0d646c38583ba0f68f33b3f3d9e.jpg?t=1582550242" alt="" class="image">
  <img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_23815433fdd4a63064da79222fdefb569eeafaba.jpg?t=1582550242" alt="" class="image">
</div>

chrome: предварительный просмотр в chrome

Firefox: предварительный просмотр в Firefox

1 Ответ

0 голосов
/ 07 марта 2020

Изменение свойства отображения тега контейнера на 'table' и добавление свойства отображения 'table-cell' в тег img мне помогло. здесь 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    background-color: green;
  width:100%;
    height: 15vw;
    display: table;
}

.image {
  width:25%;
   display:table-cell;
  padding:10px;
  float:left;
}
<div class="container">
        <img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_f0297eacbfb4266f311a8cb4137e4ef8b7cdd00b.jpg?t=1582550242"
            alt="" class="image">
        <img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_bd875dbf865e70cda73a7cd6b132cadacfdb768b.jpg?t=1582550242"
            alt="" class="image">
        <img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_7ef17676a804b0d646c38583ba0f68f33b3f3d9e.jpg?t=1582550242"
            alt="" class="image">
        <img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_23815433fdd4a63064da79222fdefb569eeafaba.jpg?t=1582550242"
            alt="" class="image">
</div>
...