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

Question

[Владислав]

Есть такая структура

<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.

Хочу сделать похожую галерею: тык

Answer 1

[Ivan Bogachev]

Пробовал object-fit, но он не поддерживается в IE.

Ну так подставьте полифилл и не заморачивайтесь.

Answer 2

[Антон]

Создаете медиа запрос по размеру экрана и выставляете в процентах на то или иное значение, информацию о медиа запросах можете найти в поисковике.

Comments

[Владислав]

Дело в том, что в процентах не очень подходит, т.к. у меня все подсчитано и картинка должна быть не больше 300px.

[Антон]

Владислав Валентюкевич: попробуйте поэкспериментировать max-width: 300px;