Задача.

Есть картинки на сервере. Все - разного размера. Требуется на странице сделать из них одинаковые, например, квадратные и при этом:
- картинки должны по длинной стороне - обрезаться по короткой стороне - занимать весь родительский элемент и масштабироваться.
- должны быть адаптивными. То есть изменять свой размер пропорционально изменению размера окна браузера.
- это должно работать без использования JavaScript. Только html и css.
- ну и разумеется - кроссбраузерность, это по умолчанию.

Решение.

Решение можно посмотреть тут. Ну а если вы хотите чтобы был тег img, это тоже можно, но сложнее. Прочитайте эту статью и попробуйте применить на практике средства, которые в ней описаны.

Ход решения.

Да, признаю, сначала я пошел по ложному пути. В чем же причина моей ошибки? В том, что я отталкивался от стандартных решений и не хотел думать сам. Bootstrap - замечательный фреймворк - он прост и удобен и это расхолаживает. Появляется чувство, что он может все - это не так. Но вот чего он не может, так это делать многоколоночные макеты из картинок разного размера. Хорошо, есть плагины, позволяющие решить эту проблему при помощи js. Но стал бы я устанавливать такую штуку для себя? Ответ однозначен - ни-за-что. Потому что это формализм. А на деле это также оправдано, примерно, как шурупы забивать молотком. Забиваются - никаких проблем, но... Вот это "но" заставило меня копать. Начал я читать и в этой статье в комментариях случайно наткнулся на этот хак. Оказывается можно только лишь средствами html и css сделать резиновую квадратную область! Ну, а уж запихнуть туда картинку я смогу! Но радость моя была преждевременной. "Впихнуть туда картинку" оказалось легко, да нелегко сделать это правильно - так чтобы картинка где нужно центрировалась и где нужно обрезалась. В итоге получилось это сделать при помощи атрибута style"background: url(путь к картинке/картинка.jpg) no-repeat center center / cover;" Если же Вы хотите добавить эту картинку при помощи тега img, можно попробовать обратить внимание на вот эту статью, попробовать применить описанные в ней способы для вставки картинок...

---