Как получить масштаб фотоснимков css с размером окна и устройством

Я пытаюсь настроить жидкий шаблон, который я могу использовать для удобного просмотра видовых экранов. Однако теперь, когда я пытаюсь изменить размер окна моего браузера, он не масштабируется, и на моем iphone я просто вижу верхнюю левую часть моего заголовка. У меня есть основной фон обертки и анимированный gif заголовка, которые имеют одинаковую ширину 1200 пикселей. Любая помощь будет принята с благодарностью.Как получить масштаб фотоснимков css с размером окна и устройством

окно просмотра

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS

body { 
    background-color: #B28D66; 
    margin: 0 auto; 
} 
#Wrapper { 
    max-width:1200px; 
    width:95%; 
    background-image: url(../img/background_main.jpg); 
    background-repeat: no-repeat scroll; 
    background-position: center top; 
    height: 2200px; 
    position: relative; 
    margin-top: 0; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#Wrapper #Banner { 
    width: 100%; 
    height: 350px; 
    background-image: url(../img/animated-gif-header.gif); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#Wrapper #Content { 
    width: 75%; 
    margin: 0 auto; 
} 
#Wrapper #MainNav { 
    background-image: url(../img/nav_bar.png); 
    width: 100%; 
    height: 75px; 
    margin-top: -20px; 
} 
#Wrapper #MainNav ul { 
    margin-right: 100px; 

} 

#Wrapper #MainNav ul li { 
    float: right; 
    margin-top: 15px; 
    padding-right: 21px;

источник

2013-03-23 Djacksway

Пробовал ли вы использовать разные изображения с помощью мультимедийного запроса на телефон? Это нереально, что одно и то же изображение будет заполнять 1400px широкий экран ноутбука и 320px iphone экран отлично. – staypuftman

попробуйте использовать фон размера собственности следующим образом:

фон-размер: 100% авто;

или используйте ниже, если вы хотите иметь высоту, покрывающую всю высоту страницы

фон-размер: авто 100%;

источник

2013-03-23 15:03:42

background-size: cover;

прекрасно работает для меня.

источник

2013-12-09 06:39:57

background-image: url(''); 
background: no-repeat center center cover;

Обычно это нормально.

источник

2014-05-21 10:30:50

Как получить масштаб фотоснимков css с размером окна и устройством

ответ

Смежные вопросы