Изменить размер изображения в сетке, чтобы подогнать div к меньшему размеру - PullRequest
Новая
       0

Изменить размер изображения в сетке, чтобы подогнать div к меньшему размеру

1 голос
/ 29 февраля 2020

Я пытаюсь построить заголовок с 3 столбцами. Одно изображение в каждом столбце. Мне нужно, чтобы размеры изображений соответствовали высоте заголовка.

Мои изображения имеют разрешение 100px x 100px.

Так что при высоте выше 100px изменение размера работает нормально:

enter image description here

Но при высоте менее 100 пикселей изображение не изменяется.

enter image description here

Вот мой HTML

<body>
    <div id="header">
        <div class="headergridelement"><img alt="" src="file:///C:/.../info100x100.jpg"></div>
        <div class="headergridelement"><img alt="" src="file:///C:/.../info100x100.jpg"></div>
        <div class="headergridelement"><img alt="" src="file:///C:/.../info100x100.jpg"></div>
    </div>
</body>

, а вот css, который я использую. 

#header {
    display: grid;
    grid-template-columns: auto auto auto;
    position: fixed;
    width: 100%;
    text-align: center;
    height:100%;
}

#header .headergridelement {
   background-color: rgba(255, 255, 255, 1);
}

#header img {
    height:100%;
}


body {
    margin-top: 0px;
    margin-left: 0px;
}

Какое свойство мне не хватает?

1 Ответ

1 голос
/ 29 февраля 2020

Вы можете добавить object-fit: cover, а затем указать необходимый max-height, в данном случае это 100%.
Таким образом, он предотвращает переполнение изображения элементом #header. 

#header img {
    height: 100%;
    object-fit: cover;
    max-height: 100%;
}

Вы можете посмотреть object-fit здесь в MDN документах.

Обновление: решение 2

Приведенный выше код отлично работает в браузере Chrome, но не работает в Firefox.
Решением для Firefox будет использование position: relative в родительском div и position: absolute в изображении. Кроме того, установите height: 100%, а также положение и поле для центрирования изображения. 

#header .headergridelement {
   background-color: rgba(255, 255, 255, 1);
   position: relative;
}

#header img {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...