Подогнать фоновое изображение к div


334

У меня есть фоновое изображение в следующем div, но изображение обрезается:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

Есть ли способ показать фоновое изображение, не обрезая его?


Изображение больше чем div?
grc

1
да, изображение больше чем div
Rajeev

1
Фоновое изображение: URL (/media/img_1_bg.jpg); background-size: содержать; фон-повторить: не повторять;
Waruna Manjula

Ответы:


672

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

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

background-size: contain;

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

background-size: cover;

Пример JSFiddle

Также существует фильтр для поддержки IE 5.5+ , а также префиксы поставщиков для некоторых старых браузеров .


119

Если вам нужно, чтобы изображение имело одинаковые размеры div, я думаю, что это самое элегантное решение:

background-size: 100% 100%;

Если нет, то ответ @grc является наиболее подходящим.

Источник: http://www.w3schools.com/cssref/css3_pr_background-size.asp


В конце концов я нашел решение, чтобы поместить весь div в фон. Спасибо!
Камиль Рыковски

5
но это растянет изображение ... есть ли способ уместить фоновое изображение, не растягивая его?
Джунаид

1
Однако соотношение сторон потеряно.
Учащийся

@Learner Если вы измените размеры изображения без обрезки изображения, соотношение сторон будет потеряно в 99% случаев. Это здравый смысл.
Вайбхав Вишал

11

Вы можете использовать эти атрибуты:

background-size: contain;
background-repeat: no-repeat;

и тогда ваш код выглядит так:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

8

Вы также используете это:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%; 

Я не знаю ваших div-значений, но давайте предположим, что они у вас есть.

height: auto;
max-width: 600px;

Опять же, это просто случайные числа. Может быть довольно сложно создать фоновое изображение (если вы захотите) с фиксированной шириной для div, поэтому лучше использовать max-width. И на самом деле не сложно заполнить div фоновым изображением, просто убедитесь, что вы правильно оформили родительский элемент, чтобы у изображения было место, куда оно может попасть.

Крис


Ссылка на высоко оцененный ответ, который более подробно рассказывает об этом решении: stackoverflow.com/questions/600743/… и показывает, как рассчитать padding-top.
Джон Ли
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.