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
121
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
Mitä hittoa tapahtuu nuorille miehillemme?
Mikä on saanut heidän päänsä sekaisin ja kadottamaan järjellisyytensä normaalista elämästä ja ryhtymään hörhöiksi? https3704599En sitten aio sinua odotella
Olen ollut omasta halustani yksin, mutta jossain vaiheessa aion etsiä seuraa. Tämä on aivan naurettavaa pelleilyä. Jos e851865Martina jättää triathlonin: "Aika kääntää sivua"
Martina kirjoittaa vapaasti natiivienkusta suomeen käännetyssä tunteikkaassa tekstissä Instassaan. Martina kertoo olevan651610- 441556
Persut vajosivat pinnan alle
Sosiaali- ja terveysministeri Kaisa Juuson (ps) tietämättömyys hallinnonalansa leikkauksista on pöyristyttänyt Suomen ka2141403En vain ole riittävä
Muutenhan haluaisit minut oikeasti ja tekisit jotain sen eteen. Joo, ja kun et varmaan halua edes leikisti. Kaikki on o291400Oon pahoillani että
Tapasit näin hyödyttömän, arvottoman, ruman ja tylsän ihmisen niinku minä :(591371Kuka sinä oikeen olet
Joka kirjoittelet usein minun kanssa täällä? Olen tunnistanut samaksi kirjoittajaksi sinut. Miksi et anna mitään vinkkej541357- 281235
Hei, vain sinä voit tehdä sen.
Only you, can make this world seem right Only you, can make the darkness bright Only you and you alone Can make a change81218