Pildi 'fittimine' ekraani resosse kenasti

[Karl Erik 0]

Tervist, oleks siis abi vaja pisut CSS-ga. Nimelt teen hetkel ühte veebilehte, millel on slider jScriptiga, kuid pilt ei taha sinna kenasti jääda. Tahan, et pilt oleks vertikaalselt äärest ääreni ning sedasi, et terve pilt on näha, mitte et üks osa jääks nagu ekraanist välja. Oskab aidata keegi ?

 

jScripti CSS

#slider {    width:100%;height:400px;/* Make it the same size as your images */
   background:#fff url(loading.gif) no-repeat 50% 50%;
   position:relative;
   margin:0 auto;/*make the image slider center-aligned */
   box-shadow: 0px 1px 5px #999999;
}
#slider img {
   position:absolute;
   border:none;
   display:none;
}

 

Veebilehe CSS

.big_background .container {    position: relative;
}


.big_background div.tagline {
 height: 150px;
 width: 100%;
 background: #fafafa;
 position: relative;
 top: 402px;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
 -moz-border-radius-bottomright: 0px;
 -moz-border-radius-bottomleft: 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 border-radius: 10px 10px 0px 0px;
 border-top: 2px solid #161616; 
 text-align: center;
}




.big_background.tiny div.tagline {
 top: 70px;
}


.big_background div.tagline h2 {
 font-weight: bold;
 color: #333;
 font-size: 23px;
 padding: 20px 0;
 line-height: 25px;
}


.big_background div.tagline img {
 width: 75px;
 height: 75px;
 margin: 0 55px;
}


.big_background h3.tagline {
 position: absolute;
 left: 0;
 top: 80px;
 color: #fefefe;
 font-family: "Open Sans", Helvetica, tahoma sans-serif;
 font-size: 50px;
 position: relative;
 margin-bottom: 10px;
 font-weight: 300;
}


.big_background p.tagline {
 position: absolute;
 left: 0;
 top:150px;
 line-height: 34px;
 color: #FEFEFE;
 font-size: 20px;
 font-size: 2rem;
 font-weight: 700;
 margin-bottom: 34px;
 font-weight: 300;
}


.big_background img.tagline {
 position: absolute;
 width: 100%;
 height: 396px;
 right: 0;
 top: 100px;
 z-index: 1;
}

 

Index.php-st

 

1 slaideri pilt: http://minthost.org/uus/images/slider1.jpg

ning hetkeline mant: http://minthost.org/uus

Muudetud 1. oktoober, 2012 liikme Karl Erik'i poolt

[Külaline misterx]

Idee poolest peaks aitama

background-size:contain;

[Karl Erik 0]

Idee poolest peaks aitama

background-size:contain;

Venitab vaid selle loading.gif välja (Need jooksvad punktid, enne slideri pildi kuvamist)

[Karl Erik 0]

ikka vaja

[Külaline misterx]

Sellise lahenduse puhul on üpris keeruline. Võid proovida veel nii, nagu on http://www.valx.ee taustapilt.