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

Подогнать изображение к элементу сетки

0 голосов
/ 04 апреля 2020

Я пытаюсь сделать элемент карты, который состоит из нескольких текстовых элементов и изображения. Моя цель - сделать так, чтобы изображение соответствовало только соответствующей ячейке сетки, а не вызывало его рост. Высота строки сетки должна определяться текстовым содержимым (с правой стороны карты).

Мне удалось заставить его работать на Chrome, но Firefox все еще позволяет изображению быть много больше.

Вот мой прототип: https://codepen.io/gmltA/pen/yLNWmrZ

Chrome:

Desired result (works in Chrome)

Firefox:

Wrong behaviour (Firefox)

Я предполагаю, что что-то упустил в этой части кода (которая отвечает за элемент сетки, и это содержание) 

.card__image-wrapper {
  grid-area: img;
  max-width: 124px;
  padding: 4px;

  img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
  }
}

Наиболее очевидный вариант возврата - установить изображение в качестве фона элемента, но я, честно говоря, не хочу этого делать, если есть другое решение.

1 Ответ

1 голос
/ 04 апреля 2020

хитрость заключалась бы в том, чтобы придать нижнему отрицательному краю изображение, чтобы не растягивать контейнер выше высоты братьев и сестер. 

  img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    margin-bottom:-100%;
    display:block;
  }

раздвоенное перо: https://codepen.io/gc-nomade/pen/gOpNYGj

Помимо вопроса, поведение ФФ, похоже, стоит ожидать от моего собственного скромного мнения.

...