Как покрыть div изображением независимо от его высоты?

Question

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

Позвольте мне объяснить проблему,

Я оставляю здесь изображение, которое может помочь вам понять вопрос:

У меня есть полная ширина DIV, , высота которого будет изменение на изменении высоты страницы.
Этот ДИВ содержит всю ширину изображения, покрывая его, так что вы можете увидеть на следующем скриншоте:

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

Проблема порождает здесь:
Когда экран получает порцию между шириной и высотой 1: 2 (ширина: высота), а затем, изображения будут повторно размер как только страница-х Ширина (что максимальная ширина IMG в) не будет достаточно, чтобы заполнить высоту, не заполняя DIV, как я хотел, как вы можете проверить на следующем скриншоте:

(красная часть является материнским ДИВ изображения)

• Я буду искать решение в JavaScript/JQuery/CSS
• Использование изображения в качестве фона в настоящее время не рекомендуется, и она не работает, как я пытался до того
• Любой отзыв или указание будет высоко оценен и оценен;
• Если вы нашли это сообщение оскорбительным или rule-breaker, пожалуйста, сообщите об этом, чтобы удалить этот вопрос, если я не хочу спамить это замечательное сообщество.

Спасибо заранее!(примите мои извинения за этот длинный вопрос)

С наилучшими пожеланиями,
Владимиру

Answer 1

свойство, что вы ищете это:

background-size: cover; (для фона изображения) ;
object-fit: cover; (для обычных изображений);

пс: контейнер объекта посадки картины должны overflow: hidden