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

427

    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. Mitä hyvää rikkaiden hyysääminen Suomelle tuonut?

      Minäpä vastaan: ei yhtikäs mitään, vaan pelkkää vahinkoa. Demareiden ansiosta Suomen valtio oli käytännössä vielä 1980-
      Maailman menoa
      24
      7435
    2. Grahn-Laasonen: "Kansalainen joutuu pettymään, jos demareita äänestää"

      Ministeri viittaa tuoreeseen Helsingin Sanomien juttuun, jossa demarijohtajan keinoja Suomen suunnan muuttamiseksi esite
      Maailman menoa
      98
      6096
    3. Tytti Tuppurainen häpäisi Suomen epäisänmaallisella lausunnollaan USA:n ulkoministerille Rubiolle.

      https://www.is.fi/politiikka/art-2000011816267.html Miksi Tytti Tuppurainen päästetään antamaan typeriä lausuntoja noin
      Maailman menoa
      114
      4163
    4. Mitä haluaisit sanoa tänään hänelle?

      Rakastamallesi ihmiselle.
      Ikävä
      155
      4154
    5. Pystyisitkö olla

      Kanssani kaiken sotkun jälkeen? Ainakaan tunteet ei ole loppuneet
      Ikävä
      163
      1901
    6. Paras muistosi

      kaivatustasi?
      Ikävä
      61
      1768
    7. Miksi miehen on hankala ymmärtää

      Että hänen on tehtävä aloite. Niin sen kuuluu mennä luonnollisesti.
      Ikävä
      136
      1660
    8. Hei kuule nainen

      Seuraavan kerran kun nähdään, puhu minulle jooko! Näin toivoo mies
      Ikävä
      38
      1458
    9. Mitä sä musta oikein haluat?!

      Anna olla jo.
      Ikävä
      29
      1428
    10. Mitä puuhailet nyt ystävänpäivänä

      nainen, kun et ole mun kanssa?
      Ikävä
      45
      1414
    Aihe