Как в сетке greed задать масштабирование изображения по высоте родительского элемента?

Question

[Soul1]

Исходный код:
https://codepen.io/ShadowOfBeing/pen/poKrKpW

Как сделать так, чтобы высота всех изображений была одинаковой, например 200px? Пробовал для person-img отдельно задать свойства:

.person-img {
  height: 200px;
}

тогда высота становится нужной, но пропадает уменьшение размеров изображений при сужении ширины экрана (при изначальной вёрстке по ссылке оно есть). Вроде бы правильно задавать не высоту изображения, а высоту строки в гриде, но через grid-template-rows: repeat(3, 200px) картинки обрезаются по высоте.

Comments

[Ankhena]

Оберните каждую картинку в div или figure.
Им задавайте размеры (гридом или размерами самим оберткам, главное без противоречий).
А уже потом указывайте картинкам contain или cover и размеры.

p.s. Нет смысла в такой вложенности селекторов .persons-left-box .person_main_box .person-img.
Достаточно просто .person-img {}.
Не стреляйте сами себе в ногу.

[Soul1]

Ankhena сделал как вы написали, высота только на старте равна, при уменьшении ширины экрана более широкие изображения раньше начинают сжиматься, а нужно чтобы все изображения одновременно масштабировались.
https://codepen.io/ShadowOfBeing/pen/poKrKpW

[Ankhena]

Soul1, с чего бы им начать делать это одновременно, если вертикальные продолжают помещаться в высоту, а горизонтальные нет?
Т.е. нужно либо изменить логику ширины (делать колонки не одной ширины, а по содержимому) либо сменить object-fit либо смириться либо разобраться с этим:

высота только на старте равна

.

Что должно происходить с высотой? Как она должна адаптироваться?

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

[Soul1]

Ankhena заменил display: grid на display: inline-grid и прописал колонкам ширину auto, ширина колонок стала по ширине изображений, но это не помогло - при уменьшении ширины экрана сначала более широкие столбцы сжимаются и только когда они достигают ширины самой узкой колонки тогда уже все вместе сжимаются.
https://codepen.io/ShadowOfBeing/pen/poKrKpW

[Ankhena]

Soul1, пока вы разговариваете сам с собой и не даете ответов на уточняющие вопросы.
Да, auto именно так себя и ведет по спеке. И делает это, в целом, логично.

И пока вы пляшете от высоты и не начнете изменять её вместе с шириной (а говорите, что она должна меняться, но не меняете и не сообщаете как именно она должна меняться).

Есть ещё вопрос для размышлений: сейчас все строки одинаковые и первый столбец самый узкий. Но ведь в реальности так будет не всегда?

[Soul1]

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

И пока вы пляшете от высоты и не начнете изменять её вместе с шириной (а говорите, что она должна меняться, но не меняете и не сообщаете как именно она должна меняться).

В том то и дело, что я понятия не имею как это делается. Уже который день гуглю, без толку. Я знаю только, что можно задать фиксированную ширину/высоту, либо авто, всё, на этом мои знания заканчиваются.

Есть ещё вопрос для размышлений: сейчас все строки одинаковые и первый столбец самый узкий. Но ведь в реальности так будет не всегда?

Естественно в каждой строке будут разные картинки с разной шириной. У меня была вёрстка на флексах, но там были похожие проблемы и мне порекомендовали перейти на грид. С гридом вообще не знаком, в инструкциях в сети не описаны такие нестандартные случаи. Я думаю логичнее каждый ряд представить единой ячейкой, но не знаю как в одну ячейку засунуть 3 картинки.

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

[Ankhena]

Soul1, чтобы разобраться, что вообще вы можете сделать, почитайте что делают auto и minmax в гридах.
https://developer.mozilla.org/ru/docs/Web/CSS/minmax
https://developer.mozilla.org/ru/docs/Web/CSS/grid...

Answer 1

[Alexey Levicky]

object-fit: cover;
Or
object-fir: cotain;

Comments

[Soul1]

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

spoiler

А нужно, чтобы все изображения начали уменьшаться одновременно.

[Soul1]

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

[Alexey Levicky]

что бы поведение было таким как Вы ожидаете, картинки должны быть одинаковых размеров

[Alexey Levicky]

можете использовать такой вариант, но некоторые картинки все равно будут обрезаться

.persons-left-box .person_main_box {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.persons-left-box .person_main_box .person-img {
  max-width: 100%;
  object-fit: cover;
  object-position: top;
}