как сделать квадратные обрезанные изображения отзывчивыми

Я пытаюсь обрезать набор изображений немного разных размеров, чтобы они были квадратами совпадающих размеров, и сделать их отзывчивыми. Я обнаружил, что можно обрезать мои изображения, поместив их в div, а затем сделав изображение фоновым изображением, но когда я пытаюсь использовать height: auto для получения адаптивных изображений, div рушится.

Это самое близкое, что я могу найти для своей проблемы: Как сделать обрезанное изображение по центру отзывчивый?

но это решение может получить квадратную обрезку только в том случае, если изображение изначально имеет портретную ориентацию. Кроме того, мне пришлось бы вручную обрезать каждое изображение в соответствии с его размером.

Я думаю, что я ищу хак CSS, который мог бы обрезать все мои изображения до квадрата одинакового размера, а затем масштабировать их в ответ. Это принятие желаемого за действительное для CSS?


person Saralyn    schedule 22.05.2016    source источник
comment
Вы пробовали свойство max-width?   -  person Dhaval Chheda    schedule 22.05.2016
comment
Да. Я установил его с максимальной шириной: 100%   -  person Saralyn    schedule 22.05.2016
comment
Вчера я работал над проектом и добавил этот код для того, чтобы мое изображение реагировало (в проект был встроен бутстрап), поэтому вы можете попробовать мой код и посмотреть, работает ли он и для вас.. .about-image .class-name img { дисплей: блок; ширина: 100%; высота: 28см; }   -  person Dhaval Chheda    schedule 22.05.2016


Ответы (1)


Вы пробовали background-size:cover? он настраивает фоновое изображение на размер контейнера.

    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
person Johnnyenc    schedule 22.05.2016