Я знаю, что на самом деле невозможно изменить изображение с помощью CSS, поэтому я помещаю кадрирование в кавычки.
То, что я хотел бы сделать, это взять прямоугольные изображения и использовать CSS, чтобы они выглядели квадратными, не искажая изображение вообще.
Я бы хотел включить это:
В это:
background-position
или старой оболочки div сoverflow:hidden
изображением и относительным позиционированием.Ответы:
Предполагая, что они не должны быть в тегах IMG ...
HTML:
CSS:
РЕДАКТИРОВАТЬ: Если div нужно связать где-нибудь, просто настройте HTML и стили следующим образом:
HTML:
CSS:
Обратите внимание, что это также может быть изменено, чтобы быть отзывчивым, например,% ширина и высота и т. Д.
источник
height: 460px; width: 100%;
и он работает как шармЧистое решение CSS без обертки
div
или другого бесполезного кода:источник
overflow:hidden
).Например:
источник
Используя background-size: cover - http://codepen.io/anon/pen/RNyKzB
CSS:
Разметка:
источник
Я на самом деле недавно столкнулся с этой же проблемой и в результате получил немного другой подход (я не мог использовать фоновые изображения). Однако для определения ориентации изображений требуется немного jQuery (я уверен, что вместо этого вы можете использовать обычный JS).
Я написал сообщение в блоге об этом, если вам интересно больше объяснений, но код довольно прост:
HTML:
CSS:
JQuery:
источник
$(this).load(function(){...
внутри каждого цикла, поэтому jQuery немного ждет, пока изображение загрузится, и получит реальные размеры изображения.Если изображение находится в контейнере с отзывчивым шириной:
HTML
CSS
источник
У меня была похожая проблема, и я не мог «пойти на компромисс» с фоновыми изображениями. Я придумал это.
Надеюсь это поможет!
Пример: https://jsfiddle.net/cfbuwxmr/1/
источник
Использовать CSS: переполнение:
источник
Либо используйте div с квадратными размерами с изображением внутри с классом .testimg:
или квадратный div с фоном изображения.
Вот несколько примеров: http://jsfiddle.net/QqCLC/1/
ОБНОВЛЕНО ТАМ ИЗОБРАЖЕНИЯ
источник
object-fit: cover
будет делать именно то, что вам нужно.Но это может не работать на IE / Edge. Выполните действия, показанные ниже, чтобы исправить это с помощью всего лишь CSS для работы во всех браузерах .
Подход, который я выбрал, состоял в том, чтобы расположить изображение внутри контейнера с абсолютным, а затем поместить его прямо в центр, используя комбинацию:
Как только он в центре, я даю изображение,
Это заставляет изображение получить эффект Object-fit: cover.
Вот демонстрация вышеуказанной логики.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Эта логика работает во всех браузерах.
Исходное изображение
Вертикально обрезанный
Горизонтально подрезанный
источник