Как сделать чтобы картинка подстраивалась под высоту экрана?

Question

[Олечка Макеева]

Внимание! Вопрос задаёт новичок!

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

1 скриншот - на моём компе, 2-ой на компе парня

Я хочу, чтобы сердечко с моей мордочкой всегда умещалось по высоте в экран. Без скролла. Подскажите пожалуйста, как это сделать?

Типа в относительных величинах получается либо высоту сделать (в моем случае - 75vh;), либо ширину.... А как чтобы и то и то уменьшалось, причем пропорционально при уменьшении экрана?

Comments

[Ankhena]

https://developer.mozilla.org/en-US/docs/Web/CSS/a...

[imko]

Ну можно и высоту и ширину задать) Более того ширину можно задавать даже в относительных единицах высоты экрана)

[Anton]

Выложи код на codepen и народу будет легче тебе помочь, видя код и расположение блоков сделать такое проще чем просто размышлять в вакууме и рекомендовать добавить max-width: 100% на элемент img или перевести картинку в фон и тп

Answer 1

[Вова Дружаев]

Использовать height 100% и object-fit или background-size

Или же aspect-ratio - указав пропорции ширины высоты

Answer 2

[vei66]

попробуй сделать так,все вместе это один флекс контейнер
подели на две части флекс элементы flex 0 1 50%;
левая часть понятно а правая часть по которой вопрос, сам блок задавай ширину не через width а через flex basis и добавь height а уже самой картинке которая внутри правого блока то есть img сделай max-width 100%
или object-fit:cover