it-swarm.com.ru

Настройка фонового изображения divs, чтобы соответствовать его размеру?

У меня есть <div> с фоновым изображением.

Размер <div> может меняться со временем. 

Можно ли установить фоновое изображение Divs в соответствии с размером <div>?

Допустим, у меня есть div, который является 400x400 и Image, который 1000x1000, возможно ли уменьшить изображение до 400x400 и, следовательно, соответствовать размеру <div>?

29
kfirba

Если вы хотите использовать CSS3, вы можете сделать это довольно просто, используя background-size, вот так:

background-size: 100%;

Он поддерживается всеми основными браузерами (включая IE9 +). Если вы хотите, чтобы он работал в IE8 и раньше, ознакомьтесь с ответами на на этот вопрос .

55
lifetimes

Используйте background-size для этой цели:

background-size: 100% 100%;

Еще:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

23
user1386320

Используйте background-size свойство для достижения этого. Вы должны выбрать между cover, contain и 100% - в зависимости от того, что именно вы хотите получить.

15
MarcinJuraszek

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

Чтобы масштабировать фоновое изображение для размещения внутри div:

background-size: contain;

Чтобы масштабировать фоновое изображение, чтобы охватить весь div:

background-size: cover;
6
Prajwal

Используйте это, поскольку это может также действовать как отзывчивый. :

background-size: cover;
1
Sankalp Singha

Вы можете использовать CSS3 background-size свойство для этого.

.header .logo {
background-size: 100%;
}
1
Haresh Shyara

Установите свой CSS для этого

img {
    max-width:100%,
    max-height100%
}
0
miguel.gazela

Хотел добавить решение для IE8 и ниже (ниже IE5.5, я думаю), которое не может использовать background-size

div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}
0
chiliNUT