Проблема: Я пытаюсь разместить изображения в чувствительной сетке в Twitter-бутстрапе, поэтому они будут масштабироваться в заданное пространство (для гибкого размера CSS столбца будут отличаться для разных устройств). Я хочу, чтобы они вписывались в соотношение сторон - допустим, что это квадрат.
Стандартная техника обрезки CSS не работает, если я хочу, чтобы изображения были перемасштабированы с помощью Bootstrap, чтобы соответствовать дизайну сетки. Отрицательные поля работают только для резки верхней и нижней частей - когда высота изображения должна быть разрезана, а ширина остается неизменной (например, чтобы поставить портретное изображение на квадрат).
Я обнаружил, что этот метод для указания соотношения сторон, чтобы разрезать ширину, оставляя высоту неизменной (помещая изображение ландшафта в квадрат), хорошо работает с масштабированием Bootstrap.
Пример (jsfiddle) обрезанных изображений размером 1600x400 и 400x1600. Пока что я проверил его в текущем Chrome и Safari. Изменить: Исправлено также для работы в Firefox.
Вопрос: Как я могу сделать это одним способом для: сокращения ширины и высоты. Как сделать произвольную кадрировку на изображении, выбрав прямоугольник, чтобы правильно масштабироваться с помощью Bootstrap? Как я могу обрезать до некоторого соотношения сторон без предварительного знания размера изображения?
Спасибо за любые идеи!
