Закрыть
Войти
Подождите...
Собирается информация...
Восстановить пароль
Логин или пароль введены не верно!
Подождите...
Идет авторизация.
Вход
Логин или пароль введены не верно!
Забыли пароль?
или войти через вконтакте

-size

CSS
В комплекте с «background-image» идут ещё несколько подсвойств, которые позволяют интересно работать с картинкой. Во-первых, я вам обещал, что расскажу, как сделать так, чтобы картинка подстраивалась по размер блока. Наконец, настал момент, я сейчас это сделаю. 
Текстовый вариант урока

В комплекте с «background-image» идут ещё несколько подсвойств, которые позволяют интересно работать с картинкой.

Во-первых, я вам обещал, что расскажу, как сделать так, чтобы картинка подстраивалась по размер блока. Наконец, настал момент, я сейчас это сделаю. 

Как видите, картинка обрезается и выходит за рамки нашего блока.

Чтобы такого не было, есть свойство «background-size» и ему задаём значение «cover».

.box{
  background-image:url(img/audi.png);
  background-size:cover;
}

Картинка, как видите, подстроилась.


Один небольшой нюанс. Это не значит, что если у вас картинка 2000х3000px, то её можно вставлять в блок 200х300px. Это не правильно. Опять же, как я говорил, лишние килобайты грузятся, и страница грузится, и не хорошо это. То есть это имеет смыл, если у вас блок 200х200px, а картинка, так получилось, 200х300px. То есть она где-то используется с размером 200х300px, а её ещё нужно вставить в блок 200х200px, тогда это имеет смысл. То есть расхождения должны быть не сильно большие. Повторюсь, не нужно вставлять очень большую картинку в очень маленькие блоки. Пожалуйста, обрезайте картинки до примерного хотя бы размера конечного блока. 

Собственно, вот так вот работает «background-size». На будущее скажу, что у большинства свойств есть ещё несколько дополнительных подствойств. Допустим у «background-size» есть «auto» и «contain». Они сейчас не имеют большого значения, либо они довольно-таки второстепенные  и редко используются, поэтому я на них внимание заострять не буду, ровно как и с другими свойствами, у которых есть не очень важные значения свойств. Я их просто буду описывать в текстовой документации к уроку, там они будут описаны и будет написано, что они делают, зачем они нужны, но в видео-уроках мы это особо разбирать не будем. Поэтому не удивляйтеся, если такое вдруг случилось. Если я про свойство не рассказал, значит оно второстепенное, не очень нужное и мы только заостряем внимание на первостепенных свойствах,  которые несут за собой самую главную мысль этого свойства. Короче, вы поняли, всё, давайте дальше.

Предыдущий урок Следующий урок
Тестирование

Чтобы пройти тестирование, необходимо войти или зарегистрироваться

Политика конфиденциальности   Пользовательское соглашение