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
postimies 234
6
545
Vastaukset 6
- 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
Törkeä petosepäily Suomussalmella
Uutisoi maikkari. Uhrin nimiin on nostettu pankkilainaa, hänet on saatu sijoittamaan hevosiin ja ostamaan autoja. Ei ta843270Poliisi etälamautti, sitten pahoinpiteli
Vaikeasti kehitysvammaisen niin vakavasti että kuoli pian sairaalassa. Ei osannut kehitysvammainen heti noudattaa polii3751207Anni Ihamäki saa tylyä kommenttia TTK:sta - Erityisesti tämä "vääryys" ärsyttää
Kaikille ei ole mieleen se, että Anni Ihamäki on mukana uudella Tanssii Tähtien Kanssa -kaudella. Ihamäki saa varsin ty36869Mies, olen pahoillani kun olen kuvitellut
Että pitäisit minusta. En sitä mistään tähdistä kuitenkaan lukenut, mulle vaan tuli jostain semmoinen tunne, kun itse ty65815Päivän Riikka: Pandan suklaatehdas Jyväskylästä Viroon
Menkää töihin! Viroon! --- Liki sata vuotta kestänyt suklaantuotanto makeisvalmistaja Pandan tehtaalla Vaajakoskella pä169704Mitä et ole valmis sietämään ihmissuhteissasi ja miksi?
Aiemmin jo kyseltiin mitkä vaatimukset olivat mielestänne liiallisia. Kyselläänkin nyt sitä, että millaisilla asioilla s270699Tiesitkö? Vappu Pimiän ensimmäinen aviomies ei ole Teemu-rakas
Vappu Pimiä on tätä nykyä naimisissa Teemu Huuhtasen kanssa. Pimiä on toista kertaa naimisissa, sillä ensimmäinen liitto21647Älä nyt ylikuormitu vaikka sinusta pidänkin rakas nainen
Tiedän, että olet minulle oikea. En halua pilata tätä juttua malttamattomuudella, mutta epäilen. Haluan vain olla lähel31598Sysmä tarvitsee päätöksiä
Sysmä tarvitsee päätöksiä – ei p*anjauhantaa** Kirjoitan kuntapolitiikan ulkopuolisena tarkkailijana. Sysmän poliittinen17565Älä katoa elämästäni
Kävelyllä mietin olisitpa varjo takanani vierelläni sivullani Älä katoa koskaan ole siinä pidä kädestäni kiinni ole kan30538