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

Есть такая структура
<ul>
    <li>
        <figure>
            <img src="" alt="">
            <figcaption>
                <p>sample text</p>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="" alt="">
            <figcaption>
                <p>sample text</p>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="" alt="">
            <figcaption>
                <p>sample text</p>
            </figcaption>
        </figure>
    </li>
</ul>


Дело в том, что надо сделать, чтобы картинка в IMG была адаптивной и квадратной с сохранением пропорций (исходная картинка не квадратная). Так же суть в том, чтобы максимальная ширина IMG была не больше 280px, поэтому ширина в процентом соотношении не подходит =(
UL находится в резиновом блоке, с некоторой максимальной шириной.

Не получается сделать ту самую адаптивную квадратную картинку. Пробовал object-fit, но он не поддерживается в IE.

Хочу сделать похожую галерею: тык
  • Вопрос задан
  • 674 просмотра
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Пробовал object-fit, но он не поддерживается в IE.

Ну так подставьте полифилл и не заморачивайтесь.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
boypush
@boypush
Geek
Создаете медиа запрос по размеру экрана и выставляете в процентах на то или иное значение, информацию о медиа запросах можете найти в поисковике.
Ответ написан
Ваш ответ на вопрос

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

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