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

525

    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. Joensuun kaupunki levittelee tonttitietoja Keskisuomalaiselle

      Sähköposteja ja tonttitietoja levitellään mm. Pasi Koivumaalle
      Joensuu
      23
      3061
    2. Tiesitkö tätä ex-miehistä? Noriko Salo jysäytti yllätyspaljastuksen

      Noriko Salo ja ex-F1 kuski Mika Salo olivat naimisissa v. 1999-2022. Kirsi Salon ex-mies puolestaan on muusikko Sammy A
      Kotimaiset julkkisjuorut
      12
      2149
    3. Kuka? Riehui valtuuston kokouksessa tänään ?

      Onko puolangan puolesta porukkaa. Vaikuttaa siltä. Sairasta.
      Puolanka
      69
      2000
    4. Huh, huh! Sofia Belorf ei ole itse pessyt hiuksiaan kolmeen vuoteen

      Sofia Belorf elää ökyelämää Dubaissa. Sofian arjessa kulta, raha ja luksus ovat vahvasti läsnä. Luksuselämään tottuneell
      Kotimaiset julkkisjuorut
      100
      1843
    5. Toivoisitko Rakas vielä?

      Haluaisitko vielä? Uskoisin osaavani näyttää sinulle, kuinka ainutlaatuinen nainen olet.
      Ikävä
      76
      1583
    6. Ihan pieni näkeminen vaan

      👋 ja minä olisin valmis jo vaikka mihin sun kanssa. Nämä on näitä.. 🤫🫣😘💥
      Ikävä
      40
      1356
    7. Sointu Borg tilittää - Ei suostu enää tähän työhön: "Katastrofi"

      Sointu Borg on mediapersoona, joka löi itsensä läpi Diili-realityssä. Borg on monipuolinen tekijä: mediapersoona, juonta
      Suomalaiset julkkikset
      14
      1292
    8. Keskustelua kasteesta

      You tubessa kaksi pappia keskustelivat kasteesta ja kritisoivat raamatullista uskovien kastetta. Toinen heistä yritti
      Kaste
      400
      1275
    9. Jos saisit antaa yhden neuvon

      jälkikasvullesi elämää varten, niin minkä antaisit?
      Sinkut
      111
      1085
    10. Tulipalo viimeyönä

      Olipa ikävä kuulla tämä tulipalo, nyt on jatkuvasti asuinpaloja.Grillikausi alkanut.Grillit pois parvekkeilta ja asuntoj
      Jämsä
      15
      1066
    Aihe