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>
<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;
}
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)