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

Question

[elarri]

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

<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 заранее не знаю.

Comments

[iBird Rose]

нынешний вариант в https://jsfiddle.net/ закинь

[Вадим]

object-fit?

[elarri]

iBird Rose, лови https://jsfiddle.net/dykL6nf2/

[elarri]

Вадим, использую object-fit: cover; на картинке. Не спасает...

[iBird Rose]

elarri, ну. к примеру так https://jsfiddle.net/o69kvyLa/

Answer 1

[Вадим]

Для того, чтобы работал object-fit нужно чтобы у элементов были проставлены размеры.
Вот Ваша подправленная демка.

Comments

[elarri]

Спасибо, так действительно работает. Возможно я не дополнил свой вопрос. Рядом с фото у меня была кнопка закрытия попапа. Она располагалась у правого верхнего угла фотографии... Сейчас же она улетела наверх, т.к. размеры всего контейнера стали 100hv. (( Подскажите, пожалуйста, как это можно вылечить? Заранее спасибо!

[Вадим]

elarri, Любым удобным для Вас образом. Можете поменять параметр высоты на подходящий, можете абсолютно спозиционировать кнопку относительно контэйнера.

[elarri]

Вадим, вопрос, а если мне ее надо спозиционировать не относительно контейнера, а относительно картинки с неизвестными размерами? Чтобы иконка была прикреплена к верхнему правому углу картинки (т.е. находилась рядом с ней)?

[Вадим]

elarri, Вы имеете в виду, когда картинка с сохранением пропорций становится меньше контейнера и сбоку образуется пустота, то чтобы кнопка всё равно оставалась на картинке?

[elarri]

Вадим, извини, за столь долгое молчание. Вот мой изначальный пример с покрашенной кнопкой закрытия. Если закрызить картинку, умещающуюся в размеры экрана, то кнопка закрытия находится рядом с картинкой (у верхнего правого угла) Смотри: https://jsfiddle.net/JohnJoy665/d4jkthfe/2/

теперь, если использовать тот вариант, который предложил ты. Смотри:
https://jsfiddle.net/JohnJoy665/d4jkthfe/5/

То есть мне как-то надо скомпановать картинку и кнопку, чтобы они оставались рядом и в подобном положении относительно друг друга, при этом при изменении пропорций экрана не убегали за его края...

Answer 2

[elarri]

Друзья, вопрос так и не решен. Помогите, пожалуйста, разобраться:
по задумке есть попап с img и button(закрытие). При этом должно соблюдаться два условия:
1 - при уменьшении по горизонтали или вертикали изображение с кнопкой закрытия должны оставаться в рамках экрана. При этом изображение не должно терять пропорций
2 - кнопка должна быть "привязана" к верхнему правому углу фотографии (за пределами фото).
Ниже два пояснения:
https://jsfiddle.net/JohnJoy665/d4jkthfe/2/ - здесь пример того, как сделано сейчас. button подкрашена красным для наглядности. Увы, данный вариант работает некорректно, если мы попробуем уменьшить экран по вертикали.
https://jsfiddle.net/JohnJoy665/d4jkthfe/5/ - здесь пример того, как советовали сделать. НО теперь кнопка закрытия "улетает" наверх, т.к. flex контейнер становится 100hv .
Подскажите, пожалуйста, в каком направлении копать. Что-то голову ломаю(((