Как пропорционально масштабировать фоновое изображение, которое находится в фоновом режиме div? - PullRequest
Новая
       0

Как пропорционально масштабировать фоновое изображение, которое находится в фоновом режиме div?

0 голосов
/ 19 октября 2011

Как масштабировать фоновое изображение пропорционально фону div? Я не прошу изменение размера фона для полного <body> фона.

В этом примере jsfiddle http://jsfiddle.net/jitendravyas/aQCen/1/ вы увидите, что размер текста изменяется пропорционально при изменении размера браузера или окна результатов js fiddle. но на этом изображении не происходит изменение размера. и я также хочу масштабировать изображение как текст.

Я уже знаю способ изменить размер изображения, если использовать его как <img> в разметке. но в этом вопросе я спрашиваю о , как изменить размер изображения в фоновом режиме

Ответы [ 2 ]

5 голосов
/ 19 октября 2011

Вы можете использовать свойство css3 " background-size ", однако только браузеры IE9 +, Firefox 4 и Webkit поддерживают это.Возможно, стоит обратить внимание на значения « cover » и « содержат » - cover масштабирует фоновое изображение до максимальной ширины или высоты контейнера без обрезки изображения, тогда как содержит масштаб дляполностью заполните контейнер, пока некоторые области могут быть не видны.

Подробнее здесь: http://www.css3.info/preview/background-size/

3 голосов
/ 19 октября 2011

попробуйте 

<div style="height:100px;width:100px;
background-color:red;
background-image:url('test.jpg');
background-size:contain; 
background-repeat:no-repeat;
background-position:center;"></div>

<div style="height:100px;width:100px;
background-color:red;
background-image:url('test.jpg');
background-size:cover; 
background-repeat:no-repeat;
background-position:center;"></div>

работает в gecko / webkit / opera и, возможно, новее msie

полная документация по адресу:

https://developer.mozilla.org/en/CSS/background-size

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...