Как сделать чтобы картинка подстраивалась под высоту экрана?
Внимание! Вопрос задаёт новичок!
В общем, я сделала страницу (прошу не комментировать дизайн - это учебный сайт), скинула её своему парню, а на его компе всё выглядит несколько кривее, чем задумывалось
1 скриншот - на моём компе, 2-ой на компе парня
Я хочу, чтобы сердечко с моей мордочкой всегда умещалось по высоте в экран. Без скролла. Подскажите пожалуйста, как это сделать?
Типа в относительных величинах получается либо высоту сделать (в моем случае - 75vh;), либо ширину.... А как чтобы и то и то уменьшалось, причем пропорционально при уменьшении экрана?
Дополнительно:
https://developer.mozilla.org/en-US/docs/Web/CSS/a...
Ответы:
Использовать height 100% и object-fit или background-size
Или же aspect-ratio - указав пропорции ширины высоты
попробуй сделать так,все вместе это один флекс контейнер
подели на две части флекс элементы flex 0 1 50%;
левая часть понятно а правая часть по которой вопрос, сам блок задавай ширину не через width а через flex basis и добавь height а уже самой картинке которая внутри правого блока то есть img сделай max-width 100%
или object-fit:cover
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать так, чтобы картинка подстраивалась под высоту экрана, можно использовать CSS свойство `height: 100vh;`. Это свойство указывает высоту элемента в процентах от высоты видимой области браузера.
Пример использования:
.full-height-image { height: 100vh; width: auto; display: block; margin: 0 auto; } <img src="example.jpg" class="full-height-image" alt="Full Height Image">.full-height-image { height: 100vh; width: auto; display: block; margin: 0 auto; } <img src="example.jpg" class="full-height-image" alt="Full Height Image">
В данном примере, мы создали CSS класс `.full-height-image`, который устанавливает высоту изображения в 100% высоты видимой области браузера. Таким образом, картинка будет подстраиваться под высоту экрана автоматически.
Также важно убедиться, что изображение имеет достаточно большое разрешение, чтобы не потерять качество при растяжении до высоты экрана. В противном случае, изображение может растянуться и выглядеть размытым.
Надеюсь, это поможет вам решить задачу с подстройкой картинки под высоту экрана. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.