Pitäisi saada kaikista kuvista neliöitä, niin että leikattu osa oli keskeltä:
http://s26.postimg.org/3plhlrupl/crop.png
Eli ihan sama onko kuva vaaka vai pystysuunnassa, siitä tulisi tuollainen neliö.
Onko ideoita miten tämä onnistuisi CSS avulla?
Kuvan croppaus CSS avulla
6
489
Vastaukset
- 0smo
Seuraava yksinkertainen konsti tulee mieleen: pyydetään kuvat tyhjien elementtien taustakuvina siten että elementtien koot asetetaan halutun neliön mukaiseksi ja taustakuvien sijainti keskelle (background-position:center).
- CSSääää
Tästä vois saada soveltamalla. Nytkin toimii (kait) ok, mutta kuvat pitää jakaa kahteen luokkaan, riippuen onko pysty- vai vaakakuva.
----------
body {
background: #fff;
color: #000;
}
div.img {
position: relative; float: left;
padding: 0; margin: 20px;
width: 150px;
height: 150px;
border: 5px solid #ff6600;
overflow: hidden;
}
div.img img.pysty, div.img img.vaaka {
position: absolute;
margin: auto;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
}
div.img img.pysty {
width: 150px;
height: auto;
}
div.img img.vaaka {
width: auto;
height: 150px;
}- Jätti hakasulkeita
pois joten jos kokeilet, lisää ne css.ään.
- kulmasulkeet
Jätti hakasulkeita kirjoitti:
pois joten jos kokeilet, lisää ne css.ään.
Älä nyt sentään hakasulkeita ( [ tai ] ) lisää :)
Kulmasulkeet ( < tai > ) ovat ne mitä pitää lisätä - Kulmasulkeet
kulmasulkeet kirjoitti:
Älä nyt sentään hakasulkeita ( [ tai ] ) lisää :)
Kulmasulkeet ( < tai > ) ovat ne mitä pitää lisätäTai tosin tässä tapauksessa aaltosulkeet ( { ja } )
- CSSääää
Kulmasulkeet kirjoitti:
Tai tosin tässä tapauksessa aaltosulkeet ( { ja } )
Aina ei voi onnistua laakista mutta hyvä kun korjasit ;)
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Suomessa on meneillään boomereiden kosto
1990-luvun lamassa osumaa saaneet sukupolvet toivovat sen jälkeen syntyneille sukupolville kärsimystä porvareita äänestä1283187IPCC romahtaa
Mitenkäs tässä nyt näin kävi? Ilmastohourimoinnin tukijalka myöntää, ettei mitään ilmastokatastrofia olekaan. Eikös tääl652270Petteri Orpon kommentti persujen väkivaltaan?
Hiirenhiljaa taas on, kun Tampereella persulahkon ääriosasto pahoinpiteli kantasuomalaisen tytön. Missä on pääministeri1582188Toiko Helen laivalastillisen vieraslajeja Suomeen?
Loviisan satamaan tuotiin laivalastillinen pähkinänkuoria Norsunluurannikolta Loviisan satamaan kiinnittyi vapun al561922- 1471504
Perussuomalaisten onnistunut vappumarssi nostaa kannatusta
Rauhanmarssilla olleiden kimppuun hyökänneiden vassareiden kannatus sen sijaan romahtaa. Suomen Kansa ei selvästikään p271489Pelolla pakottaminen
Kristinusko on tuovinaan valoa ja toivoa, mutta ensin pitää olla pimeyttä ja toivottomutta jotta joku valoa ja toivoa ha6241026- 100936
- 106892
- 57843