Изменение размера изображения

Question

Я просто пытаюсь показать клиенту COMP с полным изображением полной ширины (это просто не веб-сайт), но я хочу, чтобы он правильно изменялся. Основная площадь - 1124px. Я сделал основной образ 1500 px, на который я положил 100% экрана. Проблема в том, что когда я изменяю размер экрана меньше 1500 пикселей, он не центрируется. Я хотел бы, чтобы левая сторона начала отрезать часть изображения и сохранить изображение в центре. Это проще, если вы посмотрите на ссылку http://www.gregquinn.com/weg/webdesign9.html и начнете делать экран меньше (я хочу, чтобы здания и tagline оставались в центре). Должен быть простой способ сделать это с переполнением: скрытым или чем-то.

Answer 1

Эй определить этот CSS

body { 
    min-width: 1124px; 
    } 
.home-banner{ 
    background-repeat:center center; 
} 

Answer 2

Попробуйте использовать следующий CSS - фон-размер: крышка ;. Он сохранит правильные пропорции при отсечении с краев, если соотношение экрана отличается от отношения изображения. Он будет масштабироваться с помощью окна браузера. Попробуйте различные фоновые позиции, например, левый верх, чтобы добиться желаемого эффекта.

background-image:url(path-to-your-image); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:cover; 
-webkit-background-size:cover; 
-moz-background-size:cover; 
-o-background-size:cover; 

Вы можете установить ширину веб-сайта, или иметь веб-сайт дисплей шириной 100% и высоту окна браузера, используя код, приведенный ниже. Окунитесь и посмотрите, какие функции лучше всего.

html{ 
margin:0; 
padding:0; 
border:none; 
height:100%; 
width:100%; 
} 

body { 
margin:0; 
padding:0; 
height:100%; 
width:100%; 
border:none; 
background-color:#2D2D2D; /*choose a background color similar to your image*/ 
} 

Answer 3

Просто добавьте background-position:center; в .home-banner.