Kuvan croppaus CSS avulla

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?
Ilmianna
Jaa

6 Vastausta



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).
Ilmianna
Jaa
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;
}
Kommentoi
Ilmianna
Jaa
4 VASTAUSTA:
pois joten jos kokeilet, lisää ne css.ään.
Kommentoi
Ilmianna
Jaa
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ä
Kommentoi
Ilmianna
Jaa
kulmasulkeet kirjoitti:
Älä nyt sentään hakasulkeita ( [ tai ] ) lisää :)

Kulmasulkeet ( < tai > ) ovat ne mitä pitää lisätä
Tai tosin tässä tapauksessa aaltosulkeet ( { ja } )
Kommentoi
Ilmianna
Jaa
Kulmasulkeet kirjoitti:
Tai tosin tässä tapauksessa aaltosulkeet ( { ja } )
Aina ei voi onnistua laakista mutta hyvä kun korjasit ;)
Kommentoi
Ilmianna
Jaa
+Lisää kommentti

Vastaa alkuperäiseen viestiin

Kuvan croppaus CSS avulla

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?

5000 merkkiä jäljellä

Peruuta