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. Purra hyökkää nyt suomalaisen duunarin kimppuun teettämällä mamuilla palkatonta työtä

      Niinpä niin. Persut duunaripuolue, HAH. Joko alkaa kovapäisinkin persu älyämään, että persut ovat Suomen kansan vastain
      Maailman menoa
      176
      10762
    2. 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
      87
      10239
    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
      232
      5679
    4. Purra ehdottaa vaan Tanskan mallia, joka on erittäin hyvä malli

      Purra ehdotti helmikuussa Suomeen Tanskan mallia, jossa maahanmuuttajilta vaaditaan työntekoa sosiaalitukien saamiseksi.
      Maailman menoa
      178
      4508
    5. Kokoomusnuoret: Sosiaalitukien työvelvoitteen tulisi koskea kaikkia

      Riikka Purra on esittänyt, että maahanmuuttajilta tulisi edellyttää palkatonta työtä sosiaalitukien vastineeksi. Kokoom
      Maailman menoa
      129
      2990
    6. Pystyisitkö olla

      Kanssani kaiken sotkun jälkeen? Ainakaan tunteet ei ole loppuneet
      Ikävä
      171
      2985
    7. L/OVER ikuisesti minun

      Aivan järkyttävä sarja. Ei voi olla katsomatta, mutta tuo omat muistot mieleen. Näyttelijät näyttelevät turhankin hyvin
      Ikävä
      38
      1786
    8. Mitä voisit miehenä tehdä?

      Suojellaksesi kaikkia naisia ja että heillä olisi juuri sinun käytöksen takia edes vähän turvallisempaa. Mitä miehenä
      Ikävä
      298
      1378
    9. Jyrki Linnankivi, Jyrki 69 - Goottirokkarista kirkonmieheksi Lappiin!

      Jyrki Linnankivi eli Jyrki 69 on The 69 Eyes -rockyhtyeen vokalisti. Lauluhommien lisäksi hän sanoittaa, säveltää ja sov
      Työ ja opiskelu
      6
      1220
    10. Onnea Maria ja Vilma Amazing Race -voitosta!

      Maria Guzenina ja Vilma Vähämaa voittivat Amazing Race Suomi -kisan. Voiton hetkellä Guzenina paljasti, miksi valitsi Vi
      Tv-sarjat
      16
      1144
    Aihe