object-fit: cover
зробить саме те, що вам потрібно.
Але це може не працювати на IE / Edge. Виконайте, як показано нижче, щоб виправити це лише за допомогою CSS для роботи у всіх браузерах .
Я прийняв підхід, щоб розташувати зображення всередині контейнера з абсолютним, а потім розмістити його прямо в центрі, використовуючи комбінацію:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Як тільки він знаходиться в центрі, я дарую зображення,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
Це змушує зображення отримати ефект Object-fit: cover.
Ось демонстрація вищезазначеної логіки.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Ця логіка працює у всіх браузерах.
Оригінальне зображення
Вертикально обрізаний
Горизонтально обрізаний