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

493

    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. Riikka runnoo: datakeskuksille tulee UUSI yritystuki

      "Suomen valtio erikseen tukee esimerkiksi kryptovaluuttaan tai aikuisviihteeseen tai muuhun keskittyviä datakeskuksia.",
      Maailman menoa
      9
      4023
    2. Toiko Helen laivalastillisen vieraslajeja Suomeen?

      Loviisan satamaan tuotiin laiva­lastillinen pähkinän­kuoria Norsun­luu­rannikolta Loviisan satamaan kiinnittyi vapun al
      Maailman menoa
      142
      3557
    3. Elikkä Riikka Purra ei kannusta Suomea edes euroviisuissa

      Sellaista on persujen "isänmaallisuus", oma kansa viimeiseksi ja ulkomaalaiset ensimmäisiksi. https://www.iltalehti.fi/
      Maailman menoa
      92
      2233
    4. Koulujen kesälomien siirto

      Koulujen kesälomaa voitaisiin siirtää viikon verran. Se voisi olla hyvä kompromissi. Pääsiäsiseen voitaisiin lisätä muut
      Maailman menoa
      141
      1878
    5. Mitä kirjainta haluaisit

      rakastella juuri nyt?
      Ikävä
      132
      1856
    6. Riikka: 3 euron bensa, Ruotsi: bensavero jopa alle EU-minimin

      Eipä vaan suomalainen autoilija saa kaikkien rakastamalta Riikalta sympatiaa. Ruotsissa on eri meininki, siellä diskutee
      Maailman menoa
      36
      1776
    7. Victoria-tytär, 16, vertaa Martina Aitolehteä ja Esko Eerikäistä: "Iskä on enemmän..."

      Martina Aitolehti ja Esko Eerikäinen ovat ex-pari ja heillä on yksi yhteinen tytär, Victoria. Eerikäinen oli Huomenta Su
      Kotimaiset julkkisjuorut
      113
      1429
    8. Inhottava stalkkeri

      Mikä ajaa ihmisen moiseen toimintaan ?
      Ikävä
      138
      1415
    9. "UKRAINA HYÖKKÄÄ LATVIAN ÖLJYVARASTOON JA JUNAAN"!!!

      "MATKUSTAJAJUNA SAI UKRAINALAISLENNOKEISTA VAKAVIA VAURIOITA"!!!
      Maailman menoa
      55
      1206
    10. Nainen, mistä johtuu että joskus et vain ymmärrä?

      Älä sitä, älä tätä. Ei niitä varoituksia turhaan sanota. Älä laita sormeasi sirkkeliin. Älä hengaile sen murhaaja poruka
      Ikävä
      164
      1145
    Aihe