Olisi tarkoitus siistiä ulkoasua, nyt kuvat tulevat sellaisenaan max-height ja max-width rajoitettuna..
Miten saisin kuvista tasasivuiset neliöt kuvan keskeltä. Eli näitä laajakuva kuvia pitäisi saada saman kokoiseksi riippumatta onko kuvattu vaakaan tai pystyyn.
Ymmärtääköhän kukaan, hankala selittää, mutta hakusessa siis kuvien näyttäminen neliönä ilman että niitä pitää venytellä?
Onnistuuko tämä css:llä? ei haluttaisi tallentaa ylimääräisiä thumppeja palvelimelle.
Selityksestäsi jäi vähän epäselväksi, haluatko nyt siis otsikon mukaisesti kuvasta tietyn kokoisen alueen niin, että reunat leikataan pois, vai haluatko näyttää koko kuvan tietyn kokoisessa kehyksessä niin, että kuva on skaalattu kehykseen sopivaksi oikeassa kuvasuhteessa eli ilman näkyvää venymistä.
Jos haluat kaikista kuvista tietynlaisen alueen ilman skaalausta, voit tehdä vaikka näin:
div.kuva {
overflow: hidden;
position: relative;
max-width: 400px;
max-height: 400px;
}<!-- Kuva niin, että näkyy 400x400 pikseliä vasemmasta yläkulmasta: --> <div class="kuva"><img src="kuva.png" alt="" /></div> <!-- Kuva niin, että yläreunasta leikkautuu 40 pikseliä: --> <div class="kuva"><img src="kuva.png" alt="" style="top: -40px;" /></div>
Jos haluat alueen aina keskeltä etkä tiedä ennalta kuvien mittoja, voit laittaa kuvat divien taustakuviksi ja määrätä, että tausta on divissä keskitettynä.
Eiköhän tuo onnistu molemmilla. PHP:llä nappaat (jos mahdollista) näytön korkeuden ja leveyden ja lasket jonkun koon kuvalle, jossa on kuitenkin sama kuvasuhde kuin alkuperäisessä kuvassa. Sitten CSS:llä asetat kuvalle oikean koon.
EDIT: Metabolix ehtikin ensin.
Jos liikenne ei ole suurta, niin toki voit luoda aina lennosta nuo thumbnailit viakkapa phpthumbilla. Pienellä liikennemäärällä skriptin hitaus ei luulisi olevan ongelma. Eipähän tarvitse tallentaa erikseen thumbbeja.
Yksi vaihtoehto on tietysti että laitat kuvan vaikka diviin taustaksi.
Taustakuvan saa CSS:lla helposti keskelle diviä ilman sen kummempaa kikkailua.
creepy kirjoitti:
Miten saisin kuvista tasasivuiset neliöt kuvan keskeltä. Eli näitä laajakuva kuvia pitäisi saada saman kokoiseksi riippumatta onko kuvattu vaakaan tai pystyyn.
Metabolix kirjoitti:
div.kuva { overflow: hidden; position: relative; max-width: 400px; max-height: 400px; }
Metabolixin vastaus ei täytä näitä vaatimuksia. Alla täyttävä, toki jQuery:llä.
div {
width: 400px;
height: 400px;
overflow: hidden;
} /* 400 x 400 */
$(document).ready(function() {
$(".kuva").each(function() {
if($(this).width() >= $(this).height()) {
var leveys = $(this).width() * (400/$(this).height());
$(this).css("height", "400px");
$(this).css("width", leveys + "px");
var keskitys = ($(this).width()/2) - 200;
$(this).css("margin-left", -keskitys + "px");
}
else {
var korkeus = $(this).height() * (400/$(this).width());
$(this).css("width", "400px");
$(this).css("height", korkeus + "px");
var keskitys = ($(this).height()/2) - 200;
$(this).css("margin-top", -keskitys + "px");
}
});
});<div>
<img class="kuva" src="Kuva.jpg" />
</div><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Kuvia</title>
<style type="text/css">
ul {
background: #CCC;
display: block;
list-style: none;
margin: 0;
padding: 10px;
text-align: center;
}
li {
background: #555;
border: 2px solid #AAA;
display: inline-block;
height: 200px;
line-height: 195px;
margin: 5px;
padding: 0;
text-align: center;
vertical-align: middle;
width: 200px;
}
li img {
border: 0;
max-height: 200px;
max-width: 200px;
margin: 0;
padding: 0;
vertical-align: middle;
}
</style>
</head>
<body>
<ul>
<li><img alt="" src="pienikuva1.jpg" /></li>
<li><img alt="" src="pienikuva2.jpg" /></li>
<li><img alt="" src="pienikuva3.jpg" /></li>
<li><img alt="" src="pienikuva4.jpg" /></li>
<li><img alt="" src="pienikuva5.jpg" /></li>
</ul>
</body>
</html>
En nyt heti hoksannut/muistanut, miksi line-height arvolla 200px heittää kuvat liian alas, noukkimalla 5px pois siitä niin keskitys tapahtuu just keskelle.
Muoks!
Linkin takana olevaa esimerkkiä on päivitetty eeppisemmäksi. Hiiri päälle ja kuva zoomaa sisään ja pysyy siitä huolimatta keskitettynä.
Merri: Tosi hieno!
Nyt se myös animoituu käyttäen CSS3:n transformia :)
Muoks!
Tykkään uudesta CSS:stä. Pari riviä koodia ja tulee hienoja efektejä. Firefox renderöi tämän esimerkin parhaiten/sujuvimmin.
Yks huono puoli on tuossa CSS3:n efekteissä, sillä kaikki selaimet eivät tahdo tukea kaikkia, etenkin ie.
IE:n käyttäjä ei huomaa minkään puuttuvan ennen kuin kokeilee lopputulosta jollakin toisella selaimella :)
Toisaalta ensisijainen tarkoitukseni oli osoittaa, että JavaScriptiä ei tarvita. Samalla vaan innostuin kokeilemaan näitä uusia juttuja. Yllätyin siitä, miten helppoa noiden käyttö oli.
Mulla toimii tabletillakin. Ehkä IE 15 vois jo tukee sitä.
Merri kirjoitti:
Firefox renderöi tämän esimerkin parhaiten/sujuvimmin.
En huomaa mitään eroa Firefoxin ja Chromen välillä. Joku pieni eroavaisuus z-indexin toteutuksessa saattaa olla, mutta se menisi jo pilkun viilaamiseksi. :)
Edit. Tuo hitaampi 0.8s animaatio on minun silmään parempi. :P
Chrome ei tuossa ensimmäisessä esimerkissä osannut ottaa pyöreitä reunoja huomioon overflow: hidden; -asetuksella. Toisessa esimerkissä tätä ei ole, jolloin oikeastaan ainoaksi selväksi eroksi jää z-index ja se, että Chrome vilkkuttaa ainakin minun koneellani enemmän. Safarilla ja Operalla on molemmilla heikompi renderöinti kuin Chromella, Opera näistä selvästi heikoin. Mutta nämä nyt on aika pieniä asioita kun pääasia silti sujuu. Ainutkaan selain ei kaadu näiden takia, mikä on huomattava edistys kymmenen vuoden takaiseen verrattuna! :D
Kiva :)
Macro kirjoitti:
Ehkä IE 15 vois jo tukee sitä.
Toivottavasti Microsoft on siihen mennessä huomannut, että miten käteviä ne on :P
dartvaneri kirjoitti:
Toivottavasti Microsoft on siihen mennessä huomannut, että miten käteviä ne on :P
Ellen väärin muista, Microsoft tukee W3C:tä monin tavoin. Vähän kärjistettynä, IE ei tue talon omia standardeja! :D
Merri kirjoitti:
Näe se omin silmin – –
Tämä on hieno!!
Aihe on jo aika vanha, joten et voi enää vastata siihen.