Witam!

Moja stronka wygląda tak



CSS




Nie wiem jak zrobić żeby obrazek(szeroki na 1920px) był zawsze wyśrodkowany (używając selektora <img> - nie wiem czy jest to możliwe) - za pomocą cechy background niema problemu wystarczy w stylach wpisać center i zawsze środek zdjęcia jest po środku niezależnie od szerokości przeglądarki. W przypadku selektora <img> obraz "trzyma się" lewej krawędzi przeglądarki - jak zmniejszamy przeglądarkę (zbliżamy lewą krawędź przeglądarki w strone prawej) widzimy zawsze lewą część obrazka przy lewej krawędzi przeglądarki.

z góry dzięki za odpowiedz,

Gdzie to sprawdzasz? Musi działać. U mnie działa, poza tym:

http://jsfiddle.net/YbgLn/

Sprawdź wszystko jeszcze raz, masz tylko taki kawałek kodu czy coś w nim jeszcze jest?

Nie jest to możliwe za pomocą CSS i HTML. Z pomocą może Ci przyjść JS.

Co nie jest możliwe? Wyśrodkowanie obrazka za pomocą CSS i HTML? Niby czemu?

@EDIT:

możesz spróbować jeszcze tak:

Ty chyba nie rozumiesz problemu. Zobrazuję Ci go: http://jsfiddle.net/xKf49/1/embedded/result/

Teraz tak manipuluj rozmierem okna przeglądarki, żeby szerokość okna była mniejsza, niż obrazka. I w takim wypadku ma być wyświetlana środkowa część obrazka.

W Twoim rozwiązaniu doczepiłbym się jeszcze( prócz faktu, że rozwiązanie jest błędne ) do stosowania center, które jest wycofane ze specyfikacji.

Problem proponuję rozwiązać za pomocą JS lub po prostu zamiast img , użyć div i nadać mu tło(? - musiałbym to przetestować ).

Są mi znane dwa sposoby na uzyskanie takiego efektu:

1. Zawsze dopasowywuje się do szerokości przeglądarki (responsive)

DEMO: http://jsfiddle.net/S7vhr/1/embedded/result/

Kod użyty w przykładzie:

[HTML] pobierz, plaintext 
div.img {
  background: url(http://i.imgur.com/VYC9J32.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  height:885px;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
[HTML] pobierz, plaintext 

Wspierany przez przeglądarki:
- IE 9+
- Chrome
- Opera 10+
- Firefox 3.6+
- Safari 3+

Drugi sposób działa do rozmiaru okna 1024px, czyli bardziej desktopowe rozwiązanie, za to działa na starszych wersjach IE

DEMO: http://jsfiddle.net/eJZJS/1/embedded/result/

[HTML] pobierz, plaintext 
 
.image-wrapper {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}
.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div clas="image-wrapper">
    <img src="http://i.imgur.com/VYC9J32.png" />
</div>
[HTML] pobierz, plaintext 

Wspierany od IE8(na IE7 czasami też działa )

Heh, było już dosyć późno i źle podszedłem do problemu, teraz już wiem o co chodzi. W takim przypadku moje rozwiązanie to żadne, bo to nie ten problem.