Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Centrowanie obrazka
lukasheek88
post 1.04.2016, 20:10:28
Post #1





Grupa: Zarejestrowani
Postów: 91
Pomógł: 0
Dołączył: 16.11.2011

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

Witajcie,

kod wygląda następująco

Kod
<!DOCTYPE html>
<html dir="ltr" lang="pl">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <link href="favicon.ico" rel="shortcut icon" />
        <link rel="stylesheet" href="css/style.css" />
  
    
    

    
    </head>
    <body>
        <section id="first" class="anchor">
            <div id="obrazek">
                <img src="img/1_maszyna.png" />
            </div>
        </section>
        
        <section id="second" class="anchor">
            
        </section>
        
        <section id="third" class="anchor">
            
        </section>
        
        <section id="foruth" class="anchor">
            
        </section>
    </body>
</html>


i CSS do tego:
Kod
html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}

section {
    height:100%;
}

#first {
    background: url('../img/tlo_1.png') scroll no-repeat center center;
    
}



#obrazek img{
    height:100%;
    position: absolute;
    z-index:0;
    top:0;
        display: block;
    margin: 0% auto;
    
}

#second {
    background: url('../img/tlo_2.png') scroll no-repeat center center;
}

#third {
    background: url('../img/tlo_3.png') scroll no-repeat center center;
}

#foruth {
    background: url('../img/tlo_4.png') scroll no-repeat center center;
}


Obrazek ma wymiary wysokosc 740px;, szerokosc 1400px;

Chciałbym aby obrazek: 1_maszyna.png zawsze wyswietlany byl w 100% w wysokosci, a szerokosc byla proporcjonalnie dobrana i aby obrazek byl na srodku.

Z góry dziękuję za pomoc

Poniżej adres strony testowej.
http://bitly.pl/qNGc3
Chciałbym by obrazek znajdował się na środku i zawsze miał wysokość równą 100% i aby szerokość ustawiła się w zależności od wysokości (proporcjonalnie)
Go to the top of the page
+Quote Post
SHiP
post 27.04.2016, 12:36:28
Post #2





Grupa: Zarejestrowani
Postów: 697
Pomógł: 47
Dołączył: 19.12.2003
Skąd: Lublin

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

Nie lepiej w takim wypadku ustawić 1_maszyna jako drugie tło wyśrodkowane na 100% wysokości?

Ewentualnie wystarczy przesunąć obrazek za pomocą translateX:

[PHP] pobierz, plaintext 
  1. #obrazek img{
  2. height:100%;
  3. width:auto;
  4. position:absolute;
  5. top:0;
  6. left:50%;
  7. transform: translateX(-50%);
  8. }
[PHP] pobierz, plaintext


PS: link nie działa więc pisałem z pamięci, bo nie mam jak przetestować.


--------------------
Warsztat: Kubuntu, PhpStorm, Opera
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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 Wersja Lo-Fi Aktualny czas: 24.04.2024 - 23:41
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn