Rekisteröidy

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?
6545
Äänestä

Muut lukivat myös

Vastaukset 6

Vanhimmat

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).

Äänestä

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;
}

Äänestä

  • pois joten jos kokeilet, lisää ne css.ään.

    Äänestä

  • 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ä

    Äänestä

  • kulmasulkeet kirjoitti:

    Älä nyt sentään hakasulkeita ( [ tai ] ) lisää :)

    Kulmasulkeet ( < tai > ) ovat ne mitä pitää lisätä

    Tai tosin tässä tapauksessa aaltosulkeet ( { ja } )

    Äänestä

  • Kulmasulkeet kirjoitti:

    Tai tosin tässä tapauksessa aaltosulkeet ( { ja } )

    Aina ei voi onnistua laakista mutta hyvä kun korjasit ;)

    Äänestä

Luetuimmat keskustelut

  1. Älä unohda minuaNainen ethän unohda minua. Asiat olisivat voineet mennä toisin, olisi vain pitänyt uskaltaa lähestyä sinua kun annoit siihen mahdollisuuden. Olen pettynyt itseeni, ja se kyllä närästää. Naiselle Mieheltä
    Ikävä112 vastausta1363 lukukertaa
  2. Pitäisikö Vantaa liittää Helsinkiin.Mitä mieltä olette asiasta?
    Maailman menoa127 vastausta1279 lukukertaa
  3. Eläkeikä nousee 70 vuoteen. Joudunko palaamaan työelämään?Nyt se on sitten päätetty, että eläkeikä Suomessa nostetaan 70 vuoteen. https://www.is.fi/politiikka/art-2000012324133.html Pääsin 67 vuotiaana eläkkeelle viime syksynä. Tarkoittaakohan tämä, että joudun palaamaan takai…
    Maailman menoa246 vastausta1213 lukukertaa
  4. Moi kulta😍Eikös se ollut marraskuuta kun se meidän "flirttailu" alkoi silloin vuosia sitten? tarkoitan lähinnä niitä pitkiä katseita 🤩☺️ Kohta on siis maata mullistavien katseiden vuosipäivä 😘🤭
    Ikävä85 vastausta961 lukukertaa
  5. Perussuomalaiset nostamassa eläkeiän 70 vuoteenRiikka Purran johtama valtiovarainministeriö haluaa nostaa eläkeiän 70 vuoteen ja taloutta sopeutettaisiin ensi vaalikaudella 8–11 miljardilla eurolla. Perussuomalaisten johtama ministeriö ilmeisesti arvelee, että seits…
    Perussuomalaiset180 vastausta818 lukukertaa
  6. Kadutko mies?Silloin kuin vielä yritin lähestyä, etkä tarttunut siihen. Asioista pitäisi voida aina keskustella.
    Ikävä44 vastausta707 lukukertaa
  7. Nyt on nytTurha miettiä menneitä tapahtumia. Niitä ei saa tekemättömäksi. Tärkeintä on mitä tekee nyt ja tulevaisuudessa. Korjausliikkeetkin voi tehdä jos niihin tuntee tarvetta. Paluu tulevaisuuteenkin voi olla mahdollinen jos v…
    Ikävä60 vastausta696 lukukertaa
  8. Kyllä mulla oli tunteita sua kohtaan,mutta voit syyttää ainoastaan itseäsi, että en tehnyt mitään asian eteen. Se on ihan turhaa sinun miettiä, että miksi.
    Ikävä53 vastausta692 lukukertaa
  9. Niin haluaisin sut nähdä ja jutella!🙂
    Ikävä41 vastausta653 lukukertaa
  10. Onko tällainen kuvio teistä okOnko tällainen kuvio teidän mielestänne ihan normaali ja hyväksyttävä? Nainen seurustelee miehen kanssa, mutta pitää samaan aikaan läheistä yhteyttä toiseen mieheen kertomatta tälle toiselle, että on parisuhteessa. Tämä…
    Ikävä63 vastausta606 lukukertaa
  11. Pussaisitko mihinKohtaan?
    Ikävä56 vastausta551 lukukertaa
  12. Nyt kun kaikki on ohiToivon, että sulla menee hyvin ja pystyisin sinut kokonaan unohtamaan. Joskus on vaikeita hetkiä ja olen tosi pahoillani, miten sinua loukkasin ja loukkaan yhä. Se täytyy saada loppumaan.
    Ikävä45 vastausta543 lukukertaa
  13. Tunnut niinKaukaiselta jo.
    Ikävä40 vastausta483 lukukertaa
  14. Hyvää huomentaEräälle Naiselle ❤️‍🩹
    Ikävä54 vastausta457 lukukertaa
  15. Empaattiset ihmisetOnko empaattiset ihmiset, etenkin naiset antavaisempia, kun ns. tavikset? Kaverin puolesta kysyn Oisko niinku mahkui?
    Ikävä92 vastausta427 lukukertaa
  16. Millaisen suhteenOlisit halunnut kaivattusi kanssa
    Ikävä28 vastausta415 lukukertaa
  17. TTK-juontaja Veronica Verho lataa suorat sanat tatuointien arvostelijoille: "Mä toivoisin, että..."Veronica Verho juontaa Tanssii Tähtien Kanssa -ohjelmaa yhdessä Ernest Lawsonin kanssa. ​Yksi puhuttaneimmista aiheista on ollut, miten suosikkijuontajan näyttävät tatuoinnit sopivat ohjelman pukuohjeistukseen ja tullaa…
    Kotimaiset julkkisjuorut30 vastausta412 lukukertaa
  18. Et nosta minua ylösOk ei se mitään. Vajoan syvempiin vesiin💔
    Ikävä39 vastausta407 lukukertaa
  19. Jos haluat viestin...Olen vielä tämän illan palstalla. Laita halutessasi vinkki, sinä komea keski-ikäinen mies 😗
    Ikävä41 vastausta400 lukukertaa
  20. Tikusta asiaaMistä ihmeestä minä keksin sulle edes jotensakin järkevää asiaa parn lauseen verran... anna joku idea että kehtaan lähestyä. -töistä tuttu mies
    Ikävä24 vastausta393 lukukertaa

Kommentoi aloitusta

postimies 234 kirjoitti:

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?

Anonyymi
5000

Ilmoita asiaton sisältö

  • Sisältää materiaalia, joka on loukkaavaa, herjaavaa, rasistista, uhkailevaa tai ahdistelevaa.

  • Materiaali sisältää nimiä, yhteystietoja tai muita henkilökohtaisia tietoja. Julkisuuden henkilöistä, julkisissa viroissa toimivista ihmisistä sekä yritysten vastuuhenkilöistä saa keskustella työhön liittyen. Myös yksityiselämään liittyvistä asioista voi keskustella siltä osin, kuin niistä on julkisesti kerrottu.

  • Sisältää lapsille haitallista tai heiltä kiellettyä materiaalia. Seksuaalinen sisältö on sallittua aiheeseen tarkoitetuilla palstoilla, joiden ikäraja on 18 vuotta.

  • Lainvastaista sisältöä voi olla mm. yksityiselämää loukkaavan tiedon levitys, kiihottaminen kansanryhmää vastaan, laiton uhkaaminen, alaikäisiin liittyvä seksuaalinen sisältö/grooming, petokset, identiteettivarkaudet, kunnianloukkaukset ja tekijänoikeusrikkomukset.

  • Sisältö ei liity palstan tai keskusteluketjun aiheeseen.

  • Viesti ei ole suomea tai ruotsia (pl. International Forums), se sisältää mainontaa, se sisältää tekijänoikeuksin suojattua materiaalia, se on massapostitus tai jokin muu syy.

Jaa keskustelu