Для адаптации картинки с сохранением пропорций на экране с разной высотой, вы можете использовать CSS свойство `max-height: 100%;`. Это свойство устанавливает максимальную высоту элемента в процентах от высоты контейнера. Это позволит картинке автоматически подстраиваться под разные высоты экрана, сохраняя при этом свои пропорции.
Чтобы сделать так, чтобы содержимое страницы выглядело одинаково на разных компьютерах, вам нужно использовать адаптивный дизайн. Суть адаптивного дизайна заключается в том, чтобы задавать размеры элементов (например, ширина и высота) и их размещение с использованием относительных единиц измерения, таких как проценты или вьюпорты (vw, vh). Например, вместо фиксированных значений для ширины и высоты элементов, вы можете использовать проценты или вьюпорты, чтобы элементы масштабировались и располагались в зависимости от размера экрана.
В вашем случае, чтобы сердечко с мордочкой всегда умещалось по высоте в экране, вы можете использовать следующий CSS код:
```css
.heart-image {
max-height: 100vh;
}
```
где `.heart-image` - это класс вашей картинки с сердечком и мордочкой. Это свойство `max-height: 100vh;` устанавливает максимальную высоту картинки равную 100% от высоты видимой области экрана (viewport height).
Надеюсь, это поможет вам достичь желаемого результата.
