@elarri

Как отобразить img с неизвестными width и height в рамках экрана при адаптивной верстке?

есть структура:

<div class="popup">
  <div class="popup__container">
    <button type="button" class="popup__close-button"></button>
    <img src="./images/art7.jpg" alt="фото превью" class="popup__big-picture">
  </div>
</div>


popup__container - флекс, центрирующий содержимое у popup__big-picture ширина высчитывается width: calc(98% - 32px); (32 остается под popup__close-button) Проблема: если я делаю экран меньше по вертикали, то img "вылетает" за пределы экрана. Вопрос: есть ли способ css добиться отображения img без вылетов как по горизонтали, так и по вертикали? При этом с сохранением пропорций? Примечение: размеров img заранее не знаю.
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ответы на вопрос 3
MrDecoy
@MrDecoy
Верставший фронтендер
Для того, чтобы работал object-fit нужно чтобы у элементов были проставлены размеры.
Вот Ваша подправленная демка.
Ответ написан
bestowhope
@bestowhope
Печатает...
bg no-repeat не спасает?
Или скорее background-size: contain или cover
Ответ написан
@elarri Автор вопроса
Друзья, вопрос так и не решен. Помогите, пожалуйста, разобраться:
по задумке есть попап с img и button(закрытие). При этом должно соблюдаться два условия:
1 - при уменьшении по горизонтали или вертикали изображение с кнопкой закрытия должны оставаться в рамках экрана. При этом изображение не должно терять пропорций
2 - кнопка должна быть "привязана" к верхнему правому углу фотографии (за пределами фото).
Ниже два пояснения:
https://jsfiddle.net/JohnJoy665/d4jkthfe/2/ - здесь пример того, как сделано сейчас. button подкрашена красным для наглядности. Увы, данный вариант работает некорректно, если мы попробуем уменьшить экран по вертикали.
https://jsfiddle.net/JohnJoy665/d4jkthfe/5/ - здесь пример того, как советовали сделать. НО теперь кнопка закрытия "улетает" наверх, т.к. flex контейнер становится 100hv .
Подскажите, пожалуйста, в каком направлении копать. Что-то голову ломаю(((
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы