Jak zatrzymać obraz kurczenia gdy strona jest zmieniany poziomo w CSS

Question

mam obraz 1920x100, który jest wstawiany na szczycie mojej stronie:

<img src="./Resources/Images/banner.jpeg" style="position:absolute; top:0px; left:0px; height:100px; width:100%;" name="top"> 

Chciałbym mieć go tak, że gdy strona jest zmieniany poziomo, obraz nie kurczy się ze stroną, lecz pozostaje w środku ekranu, tak:

wydaje się to proste rzeczy, które można łatwo osiągnąć, ale haven znalazłem rozwiązanie.

Mogę umieścić obraz wewnątrz div i ustawić lewą pozycję div - (1920-pageWidth)/2, ale to będzie zależało od JavaScript. Szukam czystszego rozwiązania (jeśli takie istnieje), aby zminimalizować złożoność strony i zmaksymalizować zgodność przeglądarki.

Czy istnieje jakaś własność CSS, której mogłabym użyć, aby osiągnąć ten cel, czy też podążam całkowicie niewłaściwie, aby to osiągnąć?

Każda pomoc doceniona.

Answer 1

z CSS

div { 
    background: url(./Resources/Images/banner.jpeg) no-repeat scroll center top transparent; 
    height: 100px; 
} 

Answer 2

Możesz dodać tę właściwość css do obrazu: min-width: 1280px

Answer 3

Zamiast img elementem wykorzystywać ten sam obraz jako tło obrazu i położenie w centrum. Zawsze będzie wyśrodkowany, ale może zostać przycięty, gdy element jest mniejszy niż obraz. Powinieneś także ustawić background-repeat na no-repeat, na wypadek, gdyby element się powiększył.

div { 
    background: url(/to/img) no-repeat 50% 0; 
    margin: 0 auto; 
} 

Answer 4

Co o czymś takim. (Użyj połowę szerokości obrazu dla margin-left)

HTML:

<div id='wrapper'> 
    <img src='./Resources/Images/banner.jpeg' id='banner'> 
</div> 

CSS:

#wrapper{overflow:hidden;position:relative;} 
#banner{position:absolute;top:0;left:50%;margin-left:-960px;} 

Oto skrzypce wykazując go za pomocą div (zmienić szerokość #wrapper): http://jsfiddle.net/mestekweb/mDkrE/

Answer 5

Po prostu użyj obrazu jako background-image i użyj background-position wartość, aby umieścić go w środkowej górnej części elementu.

Zobacz to jsFiddle.