Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Problem z wyśrodkowanie obrazka <img>
Witek76
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 9.04.2013

Ostrzeżenie: (0%)
-----

Witam!

Moja stronka wygląda tak

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>

<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta name="Autor" content="Zbigniew Wawrzyniak" />

<title>stronka</title>

<link rel="stylesheet" href="style_stronka.css" type="text/css" />


</head>
<body>
<div class="lista_fotografii">
<img src="images/foto_1fake.jpg"/>
</div>

</body>
</html>


CSS

CODE
html {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}

body {
margin : 0px;
padding:0px;
border:0px;
}

img{
display: block;
margin-left: auto;
margin-right: auto;
}



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,
Go to the top of the page
+Quote Post
Olsz4k
post
Post #2





Grupa: Zarejestrowani
Postów: 95
Pomógł: 0
Dołączył: 26.07.2013
Skąd: Kraków

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
kamil4u
post
Post #3





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
Olsz4k
post
Post #4





Grupa: Zarejestrowani
Postów: 95
Pomógł: 0
Dołączył: 26.07.2013
Skąd: Kraków

Ostrzeżenie: (0%)
-----

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

@EDIT:

możesz spróbować jeszcze tak:

Kod
<div class="lista_fotografii">
<center><img src="images/foto_1fake.jpg"/></center>
</div>


Ten post edytował Olsz4k 21.08.2013, 23:39:48
Go to the top of the page
+Quote Post
kamil4u
post
Post #5





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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ć ).

Ten post edytował kamil4u 22.08.2013, 11:16:08


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
RiE
post
Post #6





Grupa: Zarejestrowani
Postów: 97
Pomógł: 45
Dołączył: 5.05.2010

Ostrzeżenie: (0%)
-----

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 
  1. div.img {
  2.   background: url(http://i.imgur.com/VYC9J32.png) no-repeat center center fixed; 
  3.   -webkit-background-size: cover;
  4.   -moz-background-size: cover;
  5.   -o-background-size: cover;
  6.   background-size: cover;
  7.   width:100%;
  8.   height:885px;
  9.  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
  10. -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
  11. }
[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 
  1.  
  2. .image-wrapper {
  3.     position: fixed;
  4.     top: -50%;
  5.     left: -50%;
  6.     width: 200%;
  7.     height: 200%;
  8. }
  9. .image-wrapper img {
  10.     position: absolute;
  11.     top: 0;
  12.     left: 0;
  13.     right: 0;
  14.     bottom: 0;
  15.     margin: auto;
  16.     min-width: 50%;
  17.     min-height: 50%;
  18. }
[HTML] pobierz, plaintext 


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


Wspierany od IE8(na IE7 czasami też działa smile.gif )
Go to the top of the page
+Quote Post
Olsz4k
post
Post #7





Grupa: Zarejestrowani
Postów: 95
Pomógł: 0
Dołączył: 26.07.2013
Skąd: Kraków

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 21:46
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn