Масштабування зображень в css
Головна - CSS - Масштабування зображень в CSS
Однією з чудових можливостей, яку нам додали в CSS3 - є масштабування зображень. Завдяки їй ми можемо маніпулювати зображенням, як нам це буде потрібно. CSS властивість. яке відповідає за масштабування зображень. називається background-size. Дана властивість добре тим, що ми можемо самостійно задавати потрібний нам розмір зображення, і можемо використовувати вже вбудовані значення властивості. Почнемо розбирати, які значення ми можемо використовувати. Перше - це самостійно встановити розмір зображення. Можна ставити різні одиниці виміру, а які - на Ваш розсуд. Важливо пам'ятати, що при цьому ми вказуємо два параметра без коми, перший відповідає за ширину зображення, другий за висоту зображення. Якщо встановити одне значення, то друге буде підібрано автоматично, зі збереженням пропорцій зображення. Залишилося розібрати тільки значення, які вбудовані в властивість background-size. Значення cover. означає, що зображення буде масштабувати таким чином, що його ширина і висота, будуть рівні ширині і висоті блоку, в якому воно знаходиться. Друге значення contain. означає, що зображення буде масштабувати в блоці зі збереженням пропорцій, які браузер підбере самостійно. Залишилося лише розглянути приклад використання властивості background-size:
div <
background: url ( "../ images / orange.jpg") no-repeat;
background-size: cover;
width: 700px;
height: 300px;
>
Після чого ми отримаємо наступне:
Ми створили порожній блок, якому поставили ширину і висоту, а також встановили картинку, початкова ширина якої дорівнює 320 пікселів, а висота дорівнює 240 пікселів, і застосували значення cover. для властивості background-size. Завдяки цьому значенню, зображення стало шириною як блок, в якому воно знаходиться, а саме 700 і 300 пікселів відповідно. Це лише один приклад використання даного властивості, однак раджу вам протестувати все інше, що я вказував вище. Якщо ви розберетеся в цій якості, воно Вам обов'язково стане в нагоді в подальшій роботі. До скорого!
5 останніх свіжих статей:
Здрастуйте дорогі друзі, сьогодні ми з Вами вивчимо ще одну тему присвячену мови CSS. І навчимося реалізовувати підказки на CSS.
Сьогодні ми розглянемо ще одну можливість, яку надає нам CSS3, а саме поговоримо про псевдоклас target. для чого він нам може бути потрібен, і розглянемо один з найпопулярніших способів його застосування.
