2013-11-13 3 views
1

Начну с того, что я относительно новичок в стиле HTML/CSS. У меня есть изображение 2880x540, и я хочу установить его как целевую страницу для веб-сайта. Это означает, что мне нужно, чтобы изображение было сфокусировано так, чтобы избыточная ширина истекала из окна браузера, без полосы прокрутки (избыточное разрешение для подобных мониторов с более высоким разрешением). Я планирую использовать две области изображения в качестве опрокидывания для двух других изображений, имеющих одинаковые пропорции.Центрирование изображения, большего, чем окно браузера, которое затем можно использовать в качестве изображения опрокидывания

Как прямо сейчас мой код очень простой:

<!DOCTYPE html> 
    <head> 
    </head> 
    <body> 
    <img src="sitewide.png" width="2880" height="540" alt=""/> 
    </body> 
</html> 

Любая обратная связь очень ценится.

ответ

0

Вы можете установить изображение в качестве центрированного фоне DIV:

<!DOCTYPE html> 
    <head> 
    <style> 
     body{ 
     overflow-x: hidden; 
     } 
     #bigImage{ 
     background:url('sitewide.png') no-repeat top center; 
     width: 2880px; 
     height: 540px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="bigImage"></div> 
    </body> 
</html> 
+0

Спасибо, что сделали удалить полосу прокрутки. Однако я все равно хотел бы как-то заблокировать изображение в центре браузера. Обычные HTML-методы центрирования просто не работают на больших изображениях, поэтому я не уверен, как это сделать с помощью CSS. –

+0

@ ZacharyShampine приветствуется. просто добавьте 'text-align: center;' в ваш css, он должен работать. Я обновил свой ответ. –

+0

Спасибо Nasser, но это все еще прислоняет левый край изображения к левой стороне браузера. –