Mine sisusse
Otsi siit
  • Rohkem valikuid...
Otsi tulemusi mis sisaldab...
Otsi tulemusi...

Pildi 'fittimine' ekraani resosse kenasti

Soovitatud postitused

SUPERVIP

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 liikme Karl Erik'i poolt

Jaga seda postitust


Postituse link
Share on other sites
SUPERVIP
Author of the topic Postitas
Idee poolest peaks aitama
background-size:contain;

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

Jaga seda postitust


Postituse link
Share on other sites
SUPERVIP
Author of the topic Postitas

Jaga seda postitust


Postituse link
Share on other sites

Kommentaari lisamiseks loo konto või logi sisse

Kommenteerimiseks peate olema liige

Loo konto

Liituge meie kommuuni uue kontoga. See on lihtne!

Loo uus konto

Logi sisse

On juba konto? Logi sisse siit.

Logi sisse nüüd

×
×
  • Loo uus...

Oluline informatsioon

Selle veebisaidi paremaks muutmiseks oleme teie seadmesse paigutanud küpsised . Võite kohandada oma küpsiste seadeid , vastasel juhul eeldame, et te olete küpsiste kasutamisega nõus kui jätkate veebisaidil sirvimist.. Palun lugege läbi Kasutustingimused ja Privaatsuspoliitika.