Kuvan croppaus CSS avulla

postimies 234

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?

6

545

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • 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

    1. Kuka tai ketkä tappo eilen?

      Kenet ja miksi?
      Varkaus
      36
      1756
    2. Arvostele kaivattusi

      ulkonäköä, asteikolla 1-10. Perustelut myös 🧢
      Ikävä
      50
      798
    3. Mitä teet mies?

      Oletko jonkun naisen kanssa? 😞
      Ikävä
      68
      757
    4. Miksi sitä miestä tuijotetaan joka paikassa

      Onko maine jonkinlainen?
      Ikävä
      108
      730
    5. Kuka varasti Sisun rahat

      Kun lukee Sisun pöytäkirjaa, niin kuka on se, joka on varastanut Sisun rahat?!
      Sysmä
      7
      651
    6. Miten sulla on niin kaunis

      Ääni. Sellainen rauhoittavan vangitseva, jolloin aika kuin hidastuu. Ihmettelen sua vielä aika paljon. Lähes joka aamu t
      Ikävä
      33
      609
    7. Ajattelen sinua

      vain. Ihoasi vasten ihoani, huuliasi huulillani, sormiasi vartalollani... Olen katkera elämälle siitä että se antoi sinu
      Ikävä
      27
      570
    8. Taas on Festarit ohi ja saatu toisten muijia kylläseksi asti

      2 päivää täyttä jytinää ja rytkettä kyllä kelpaa vielä Kaupunkin tukemana.
      Parkano
      15
      549
    9. Olen työtön ilman työnhakuvelvoitetta

      Saan 600e/kk. En voi tehdä töitä. En osaa laittaa ruokaa. En pysty kävelemään tai olemaan jalkeilla tuntia pidempään.
      Ikävä
      138
      445
    10. Mikä sai sinut ajattelemaan mies...

      Ettet riittäisi minulle?😔
      Ikävä
      51
      433
    Aihe