Адаптивный веб-дизайн: «Как изменить размер фонового изображения в соответствии с размером окна браузера с помощью CSS»? - PullRequest
Новая
       33

Адаптивный веб-дизайн: «Как изменить размер фонового изображения в соответствии с размером окна браузера с помощью CSS»?

8 голосов
/ 05 октября 2011

Я создаю сайт, на котором изображения всех моих продуктов будут изменяться в соответствии с размером окна браузера, поэтому Я написал несколько медиа-запросов, где использовал одно большое изображение и изменил его размер в другом размере окна, но у меня есть одно изображение, которое я использовал в фоновом режиме, как я могу изменить его размер?Я хочу поддерживать его во всех браузерах, включая IE7 и 8.

HTML 

<div></div>

CSS 

div{ 
background: url("http://canadianneighborpharmacy.net/images/cnp/discount_20.png") 
no-repeat scroll 0 0 transparent;
position:absolute;
width:45px; 
height: 45px; }

Мой живой код здесь: - http://jsfiddle.net/jamna/DdxbQ/19/ здесь у меня есть основное «изображение продукта», которое теперь изменяет размеры в соответствии с размером окна браузера (в моей скрипке я еще не писал код для изменения размера изображения продукта, ятолько показывает, какое изображение я хочу изменить в настоящее время), но у меня есть другое изображение "метка экономии денег", которое находится на фоне "промежутка", я хочу изменить размер одновременно с изображением продукта.

1 Ответ

21 голосов
/ 05 октября 2011

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

Как: 

body{
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}

есть другие свойства, такие как contain & 100% 100%

проверить эту ссылку http://css -tricks.com / 3458-perfect-full-page-background-image /

для IE вы можете использовать filter

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

РЕДАКТИРОВАТЬ: ваш действующий код правильный, но вы должны определить ширину и высоту в процентах, как это

http://jsfiddle.net/sandeep/ayUKz/3/

, и вы можете использовать тег imgкак это http://jsfiddle.net/sandeep/RMGnM/

img{
position:absolute;
width:100%;
height: 100%}

РЕДАКТИРОВАТЬ:

может быть, что вы хотите http://jsfiddle.net/sandeep/DdxbQ/20/

проверить эту ссылку также http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

...