[JS][CSS] Obrazek dostosowujący się do ekranu.

[JS][CSS] Obrazek dostosowujący się do ekranu. - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [JS][CSS] Obrazek dostosowujący się do ekranu. (/thread-js-css-obrazek-dostosowujacy-sie-do-ekranu)

[JS][CSS] Obrazek dostosowujący się do ekranu. - boorish - 14-12-2011

Witam mam problem z dostosowaniem obrazka do ekranu Smile

Chyba nie jest to wielki problem. Zastosowałem [JS] w htmlu i chciałbym za pomocą [CSS] dostosować obrazki ze skryptu do rodzielczości. Wysyłam KOD:

Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<meta name="Author" content="Wojtex">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Script-Type" content="text/css">

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

<script type="text/javascript">

   var tla=new Array('bg1.jpg','bg.jpg','bg0.jpg','bg2.jpg','bg3.jpg'); 

   var index=0; 

   function zmien_tlo() { 

     document.getElementById('id_body').style.backgroundImage="url('"+tla[index]+"')"; 

    if(index==tla.length-1) 

        index=0; 

    else 

      index++; 

     setTimeout('zmien_tlo()',10000);//<--30 sekund 

}

</script>

</head>

<body onload="zmien_tlo()" id="id_body">

</body>

</html>

Dzięki za pomoc. Pozdrawiam Smile

RE: [JS][CSS] Obrazek dostosowujący się do ekranu. - urlsite - 14-12-2011

Chodzi Ci o obrazek jako tlo?
Ustawiasz sobie styl dla body:

Kod:
body{
background-color: #KOLOR;
background-image: url('obrazek/gradient.jpg');
background-repat: repeat-x;}

Ad. 2)

Kod:
<html>
<head>...</head>
<body>
<div id="Wrapper">
<div id="Cell">
Tutaj Strona
</div>
</div>
</body>
</html>

i do tego CSS:

Kod:
*{
padding: 0;
margin: 0;}

html, body{
height: 100%;}

body{
display: table;
width: 750px; <- szerokosc strony
margin: 0 auto;}

#Wrapper{
display: table-cell;
vertical-align: middle;}

#Cell{
height: XXXpx;} <-wysokosc strony

i jeszcze hacki dla IE:

Kod:
html{
overflow-y: hidden;
overflow-x: hidden;}

body{
position: relative;}

#Wrapper{
position: absolute;
top: 50%;}

#Cell{
position: relative;
top: -50%;}

Jezeli chcesz uzyc javscript to zrob cos takiego

<html xmlns="http://www.twoja strona"><head>

<script type="text/javascript">
function laduj_tlo(){
document.getElementById('obraz').style.width='100%';
document.getElementById('obraz').style.height='100%';
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
text-align: center;
}
</style></head><body>
<img src="Twoje zdjecie.jpg" id='obraz' onload=laduj_tlo()>
</body></html>

RE: [JS][CSS] Obrazek dostosowujący się do ekranu. - boorish - 14-12-2011

Dzięki wielkie.

Ale chciałbym żeby odniosło się to do kodu jaki podałem.
Bo jak zrobić obrazek w tle to się orientuje Smile

.
Tylko mam problem w zastosowaniu tego do skryptu powyżej. W skrypcie jak widać co 30sekund zmienia się obrazek. Chciałbym aby każdy z nich wypałniał w h: 100% w: 100% stronę, bo akutalnie po prostu wrzuca obrazek i tyle.

RE: [JS][CSS] Obrazek dostosowujący się do ekranu. - Kartofelek - 14-12-2011

http://www.css3.info/preview/background-size/
http://css3pie.com/documentation/supported-css3-features/#pie-background - dla lamusów

RE: [JS][CSS] Obrazek dostosowujący się do ekranu. - boorish - 15-12-2011

Potrafię podstawić obrazek do tła.

Chciałbym żeby ktoś mi wytłumaczył jak mam napisać w [CSS] odniesienie do tego fragmentu :

Kod:
</head>

<body onload="zmien_tlo()" id="id_body">

</body>

Próbowałem w [CSS] wpisać :

Kod:
body {

width: 100%;

height: 100%;

padding: 0px;

margin: 0px;

}

Ale nie działa. Do czego powinienem się odnieść w style.css żeby móc manipulować obrazkiem.