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 6

    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. Riikka Purra on mukana Suomen huutokauppakeisari -sarjassa

      Suomen huutokauppakeisari on tavallisten suomalaisten ohjelma. Sarjan suosiosta kertoo se, että nyt alkaa jo 19. kausi t
      Maailman menoa
      188
      1673
    2. Kuuleppas

      ensimmäiset naissuhteet toimii miehelle eräänlaisena oppikouluna, mutta hän ei välttämättä itse ymmärrä oppineensa mitää
      Ikävä
      259
      1159
    3. Mulla ei ole Suomessa enää mitään

      4 vuotta joutuu asumaan henkisessä vankilassa. Sitten voi muuttaa takaisin ulkomaille.
      Turku
      179
      826
    4. Provider miehistä..

      Tietyt miehet puhuvat ilkeästi naisista, jotka haluavat elää miehen tuloilla. Eikö? Mutta miksi tietyt miehet siitä pah
      Ikävä
      222
      731
    5. Kuinka nainen jaksat ja voit

      Toivottavasti hyvin.
      Ikävä
      43
      731
    6. Sinulle nainen

      En ehkä koskaan osannut sanoa tätä oikein. Minun vaikeuteni luottaa liittyi ennen kaikkea menettämisen pelkoon. Siihen
      Ikävä
      63
      705
    7. Ethän mies vielä

      luovu meistä? Haluaisin jo sun syliin.
      Ikävä
      55
      692
    8. Sut.

      Tuhotaan. :)
      Tunteet
      73
      610
    9. Hei rakkaani.

      Kohtaaminen lähestyy. Miten teemme sen? Kumpi ottaa yhteyttä vai törmäämmekö jossain sattumalta? Tuleva vaimosi
      Ikävä
      50
      603
    10. Tiedätkö sitä

      Että sinun äänesi on ihanan pehmeä
      Ikävä
      40
      596
    11. Haaveilen edelleen

      Sinusta aika ajoin
      Ikävä
      38
      583
    12. Yt:t kunnassa päättyi

      Oliko nämä tarpeelliset ja ratkeaako taloushuolet näiden avulla? Lehdessä ilmoitettujen lukujen perusteella lisää on tul
      Lappajärvi
      68
      583
    13. Ethän voinut nainen tietää, että rikot rikotun

      Omaa elämää taas mietin aamuyön tunteina. En vieläkään löytänyt muistin sokkeloista ainuttakaan onnen hetkeä. Kaipuu on
      Ikävä
      68
      580
    14. 31
      528
    15. Martsusta tuli leuhka

      Ja ylimielinen. Hän ei nosta persettäkään ilmaseksi . Luulempa et nämä ei tee hyvää hyvinvointivalmennuksille.... Nannal
      Kotimaiset julkkisjuorut
      176
      524
    16. Mä oon kallistumassa

      Rikosilmoitukseen!
      Suhteet
      81
      509
    17. Tulisitpa käymään joskus vielä

      Olisi niin kiva nähdä pitkästä aikaa. Oletko vielä joskus tulossa?... Niin monet muutoksen tuulet puhaltavat, olisi lohd
      Ikävä
      23
      509
    18. Lämpimiä katseita aikoinaan vaihdettiin, siihen se sitten jäi

      Sinulla uudet tuulet ja välttelet kohtaamistamme.
      Ikävä
      30
      497
    19. Poromiehentien remontti ...

      Mikä tilanne? mistä mennään
      Hyrynsalmi
      6
      473
    20. Kiulu myynnissä!

      Kiulu hakee taas uutta yrittäjää. https://www.yritysporssi.fi/etela-pohjanmaa-lansi-suomi-finland/myytavat/yritykset/ma
      Ähtäri
      24
      472
    Aihe