Обрізаємо зображення за допомогою css

Обрізаємо зображення за допомогою CSS

Розглянемо три простих способи, які можна використовувати, щоб показати тільки частину зображення на сайті. Відзначимо, що при момощью цих методів зображення не обрізається до певного розміру в прямому сенсі, а лише показується його частина, яку нам необхідно побачити і ховається непотрібна область.

Спосіб 1. Використання негативних полів

Зображення необхідно помістити в батьківський елемент, в нашому випадку - div. Батьківський елемент повинен бути обтічним елементом (або із заданою шириною). Метод не буде працювати на блокових елементах або елементах на всю ширину.

Встановимо негативні поля для всіх чотирьох сторін: top (зверху), right (праворуч), bottom (знизу) і left (ліворуч). Негативні поля визначають, наскільки зображення, що знаходиться в батьківському елементі обрізане в кожному напрямку. Потім встановимо властивість батьківського елемента overflow (перекривання) на hidden (приховати), щоб приховати поля, які знаходяться за областю вирізаного зображення.

margin. -70px -50px -160px -175px;

Спосіб 2. Використання абсолютного позиціонування

За цим методом задаємо ширину і висоту батьківського едемента, властивість position (позиціонування) встановлюємо relative (відносним). Ширина і висота визначають розміри відображуваного поля. Для зображення всередині батьківського елементу властивість позиціонування задаємо absolute (абсолютним). Потім за допомогою властивостей top (зверху) і left (ліворуч) задаємо, яку частину зображення показувати.