Olen yrittänyt ratkaista ongelmaa: kuinka saada kuva täysin keskitettyä niin, että kuva on sekä pysty- että vaakatasossa keskitettynä ja näytön kokoon skaalautuneena (n. 94% näytön korkeudesta).
Tässä täytyy huomioida myös, että kuva voi olla minkä kokoinen tahansa.
Koodi löytyy täältä: http://jsbin.com/ODOPEraF/2/edit
Helpointa on asettaa kuva taustakuvaksi:
html {
height: 100%;
background: url('kuva.png') no-repeat center / auto 94%;
}combo kirjoitti:
94% näytön korkeudesta. – – Tässä täytyy huomioida myös, että kuva voi olla minkä kokoinen tahansa.
Entä jos kuva on niin leveä, että 94 prosentin korkuisena se menee sivusuunnassa ruudulta ulos?
<div class="dOvl">
<img src="http://farm5.staticflickr.com/4108/5083773910_ecbec96bd5_o.jpg" />
</div>div.dOvl {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 1000;
text-align: center;
font-size: 0;
}
div.dOvl:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
/* nämä kaksi voi poistaa */
background: red;
width: 2px;
}
div.dOvl > img {
max-height: 94%;
max-width: 94%;
vertical-align: middle;
}Metabolix kirjoitti:
combo kirjoitti:
94% näytön korkeudesta. – – Tässä täytyy huomioida myös, että kuva voi olla minkä kokoinen tahansa.
Entä jos kuva on niin leveä, että 94 prosentin korkuisena se menee sivusuunnassa ruudulta ulos?
Juu, ihan totta. En tullutkaan tuota ajatelleeksi, koska testaamani kuvat olivat ainoastaan "liian" leveitä.
Tuo taustakuva oli kyllä tiedossa, mutta olisin halunnut tuohon kuvaan mm. reunukset...
Merri kirjoitti:
Ja kiitos paljon avusta! On se kumma juttu, että tuo Merri on tuollainen CSS-velho. (: Meinaan englanniksi kun googlettelin, ei kukaan osannut oikein neuvoa vastaavanlaisessa tilanteessa.
Merrin ratkaisu ei toimi pyynnön mukaan: se ei suurenna kuvaa, jos kuva on liian pieni. Muuten tuossa ei ole mitään ihmeellistä; itsekin meinasin ensin laittaa tuollaisen, mutta totesin ongelman ajoissa.
CSS-taustakuva ei ole sisältöä. Se on isompi ongelma. Eipähän tarvitse viiltää ranteitaan auki ja menettää itsekunnioitustaan kaikkivoipien Internetin semantiikan jumalien edessä. Hymiö.
Metabolix kirjoitti:
Merrin ratkaisu ei toimi pyynnön mukaan: se ei suurenna kuvaa, jos kuva on liian pieni. Muuten tuossa ei ole mitään ihmeellistä; itsekin meinasin ensin laittaa tuollaisen, mutta totesin ongelman ajoissa.
En minä tuollaista ominaisuutta tarvinnutkaan. Kuva näkyy siis täysikokoisena (100%) mikäli se mahtuu näytölle. Tarkoitus ei olekaan suurentaa kuvaa pikselimössöksi, ainoastaan pienentää, jos ei muuten sovi näytölle.
Ja nyt siis kaikki toimii niin kuin halusinkin.
combo kirjoitti:
En minä tuollaista ominaisuutta tarvinnutkaan.
Huonot speksit. :( Onneksi muutostöistä veloitetaan erikseen.
Aihe on jo aika vanha, joten et voi enää vastata siihen.