Динамическое размещение изображения и обрезка

Question

Нужна помощь с размещением изображения.Я хочу, чтобы мое изображение плавало в правом нижнем углу, и если размер изображения не соответствует внутренней ширине или высоте окна, заполните окно указанным изображением без изменения соотношения сторон.Чтобы объяснить это более подробно, я добавляю картинку: Объяснение .

Пробовал разные подходы, но все они потерпели неудачу:

• Использование ширины: 100% ивысота: 100% для «img» в CSS (проблема заключается в изменении соотношения сторон изображения в зависимости от размера окна)
• Использование высоты: 100% для «img» в CSS и изменение «img» на полях с помощью JavaScript (установка левого поля равным window.innerWidth - document.getElementById ("image.png"). width пикселей), чтобы отрезать одну из сторон (проблема в том, что изображение с измененным размером иногда не имеет ширины для начала и не может получить правильные значения полей)

Пробовал пробежаться по множеству похожих постов в "stackoverflow", но не смог найти тот, который помог.

Answer 1

Вы можете использовать CSS свойства object-fit и object-position.Допустим, у вас есть следующий макет:

<div class="container">
  <img class="img" src="http://some-img"></img>
</div>

Для этого примера вы должны поместить следующие стили:

.img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* save your aspect ratio */
   object-position: right bottom; /* put your image to the right corner */
}

Демо-версию можно найти по адресу CodePen