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
502
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
Persut eivät ole kertoneet euronkaan edestä säästökohteita
Mutta änkyttävät kysellä niistä muilta jatkuvasti. Vaikuttaa ettei persuilla ole kykyä omaan ajatteluun ja päätöksenteko1952737Nuorille miehille ei kelpaa enää paljon käytetty nainen
"En ikinä huolisi mitään kyläpyörää", Tomi täräyttää TikTokissa https://www.iltalehti.fi/kotimaa/a/27182b8f-7759-49d0-82982632Marinin hallituskaudella Suomen BKT sentään kasvoi
Tämä ns. kauhukabinetti ei ole saanut aikaan kuin vahinkoa. Otti ennätysvelat rikkaiden veroalennuksiin ja sai työttömyy412334Drone-epäily Uudellamaalla
Ihmisiä kehotetaan siirtymään sisätiloihin. https://www.is.fi/kotimaa/art-2000012008358.html1591414Loppuiko MTV3 näkymästä? Vinkki, miten näet mm. Salatut elämät jatkossa
MTV:n maksuttomien tv-kanavien (MTV3, MTV Sub, MTV Ava) näkyvyys Elisan palveluissa päättyi 12.5.2026. Tämä aiheutti har171112Oho! Martina Aitolehti teki radikaalin hiusmuutoksen - Uskaltaisitko itse?
Martina Aitolehti on menestyvä yrittäjä. Nyt hän on mukana Erikoisjoukot-realityssä. Erikoisjoukoissa Aitolehti nähdään471080- 57782
Muistatko? Pete Parkkonen kohahdutti intiimillä videolla - Katso se tästä!
Pete Parkkonen sai kohujulkisuutta Kohta sataa -videolla. Nyt Parkkonen voi kohahduttaa Euroviisuissa ainakin silloin, j10781- 19699
- 55682