Как сделать адаптивный блок с фото без его обрезания?

Question

[Павел Сидоров]

Добрый день
Подскажите, как сделать адаптивный блок с фото внутри.
Фото не должно обрезаться под разным разрешением.

вприницпе есть ссылка на сайт. Показать не сложно. вот
самый первый блок.
я понимаю что есть vh и wv , я пробовал, но если применять к контейнеру, то обрезается фото.

помогите плеаз

Comments

[Тарас Шульга]

img{ width: 100% , height: auto}?)

[Павел Сидоров]

Тарас Шульга, это да. все верно. но оно должно быть видимо полностью на экране

[Тарас Шульга]

Павел Сидоров, чего? А у вас как?

[Павел Сидоров]

Тарас Шульга, типо без прокрутки

[Павел Сидоров]

Тарас Шульга, щас попробую показать

[Тарас Шульга]

https://codepen.io/angryyum/pen/ExjGPME ?

[Natalia ivanova]

А как именно обрезается изображение?
Посмотрела, у меня первый блок смотрится хорошо и на мобиле, и на десктопе.

[Павел Сидоров]

мы видим блок на сайте изначально вот так


при этом обрезается нижняя часть. Она тупо не входит в видимую область

[Павел Сидоров]

Тарас Шульга, только фото будет искажаться =)

[Павел Сидоров]

Natalia ivanova, ответил

[ThunderCat]

Павел Сидоров,

при этом обрезается нижняя часть. Она тупо не входит в видимую область

ок, так и как она должна входить по вашему? Либо контейнер должен быть выше, либо при уменьшении высоты картинки и ширина изображения уменьшится и по бокам будет белое поле...

Answer 1

[ThunderCat]

<div style="background-image: url('/include/first.jpg');background-size:contain"></div>

Answer 2

[nokimaro]

Без JS есть два варианта
1. изображение встраивать через background-image и подкрутить background-size, background-position под себя

background-image: url(...);
background-size: cover;
background-position: center;

2. Использовать object-fit

.wrapper{
    height: 100vh;
    width: 100%;
    position: relative;
}
.wrapper img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

Answer 3

[Александр]

На сайте использован очень простой подход.

img {
    width: 100%;
    height: auto;
    display: block;
}