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

271

    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. Oletko varattu minulle?

      Mieheltä kysyn.
      Ikävä
      255
      10912
    2. Mitä ensi viikolla tapahtuu?

      Mitä toivot, että ensi viikolla tapahtuu?
      Ikävä
      128
      6932
    3. Mitä Ajattelit Kun Näit Kaivattusi

      Ensimmäistä Kertaa?
      Ikävä
      95
      5603
    4. Vanhempi mies

      Jos yritän ajatella sinut pois sydämestäni, ikävä ja surullinen kaipuu tulee kaksin verroin kovempana. Olit mun unessa
      Ikävä
      33
      4918
    5. Noloa että kaipasin sinua

      Toivottavasti et tunnistanut itseäsi. Ikävissään sitä on aika typerä.
      Ikävä
      48
      4193
    6. Minne sä aina välillä joudut

      Kun pitää hakemalla hakea sut sieltä ja sitten oot hetken aikaa esillä kunnes taas menet piiloon, en ymmärrä 🤔❤️ Oot ta
      Ikävä
      30
      3729
    7. On niin paha olla

      Tarviin jotain jolla turruttaa... Kuka voi auttaa.
      Ikävä
      61
      3474
    8. On niin vaikea olla lähelläsi

      En saa ottaa kädestäsi kiinni, en saa halata. En saa silittää hiuksiasi. Enkä saa sinua koskaan omakseni. ☔ Miehelle na
      Ikävä
      32
      3412
    9. Nyt peukut pystyyn

      Nyt kaikki peukut pystyyn, siirtopersu on aikeissa muuttaa Kannuksesta pois. Facebookissa haukkui tänään Kannuksen peru
      Kannus
      21
      2881
    10. Pehmeää laskua

      Sinulle. Muutaman kilsan päästä. Mieheltä, joka salaa välittää.
      Ikävä
      58
      2660
    Aihe