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

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

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

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

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

Ответы

Ответ 1

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

background-size: 100%;

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

Ответ 3

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

Ответ 4

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

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

background-size: contain;

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

background-size: cover;

Ответ 5

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

background-size: cover;

Ответ 6

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

img {
    max-width:100%,
    max-height100%
}

Ответ 7

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

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

Ответ 8

Для этого можно использовать свойство размера фона CSS3.

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