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
500
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
Eläkeläiset siirrettävä muuttotappioalueille
Joutoväki pois ruuhkauttamasta elättäjien arkea. Samalla putoaa jokaisen asumiskulut ja rahaa jää enemmän kuluttamiseen.4743542Petteri Orpo on satusetä
Väittää että työllisyys on Suomessa samalla tasolla kuin hallituksen aloittaessa kesällä 2023. Fakta on, että työllisi302907SDP pelastaa uppoavan Suomen
2027 kun SDP voittaa ylivoimaisesti vaalit alkaa Suomen uusi raju syöksy kohti täystyöllisyyttä ja turvallisempaa yhteis1492736Kauppalehti - Törkeä skandaali paljastui: Espanja käytti EU-rahoja ihan muuhun kuin piti
Espanja on käyttänyt miljardeja euroja EU:n elpymisavustuksia eläkkeisiin ja sosiaalimenoihin – ja pyytää lisää. Espanj872185Jopa Espanjassa talous kasvaa, Purra vain irvistelee
Huomaa kuinka Purra on Suomen historian huonoin miniseteri, joka ei ole saanut aikaiseksi kuin tuhoa, Siis jopa vasemmis1962058- 1581994
Orpo ja Purra, käykää hakemassa oppia Espanjasta
Espanja on näyttänyt kuinka kova työttömyys nujerretaan ja saadaan maan talous palautettua nousu-uralle. Ei ole häpeä kä141924- 991764
Jääkiekon MM:t pitää siirtää MTV:ltä Ylelle
Persuille ikäviä uutisia taas. . Valtioneuvoston asetuksen mukaan MM-kisat kuuluvat kansallisesti merkittäviin tapahtumi511549Tsemii Pete ja Linda! Tässä tärkeät kellonajat Euroviisut-viikon ohjelmista tv:ssä!
Euroviisut järjestetään Wienissä Itävallassa 12.-16. toukokuuta. Tsemii Pete ja Linda kisaan! Vetäkää Suomelle voitto Li361480