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

208

    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. Mies, miksi et vaikuta halukkaalta?

      Ihmeellistä käytöstä mieheltä. Toki et ole mikään teinipoika enää.
      Ikävä
      123
      2548
    2. 135
      1954
    3. Terveystalon lääkärit ylilaskuttaneet

      Tämän pörriäiset osaavat, laskuttamisen. Terveystalo myöntää asian. https://www.hs.fi/suomi/art-2000011134269.html "K
      Maailman menoa
      115
      1281
    4. Ikävä on häntä

      Josta on tullut niin tärkeä ja rakas. Olisinko onnellinen hänen kanssaan. Ne rakastavat silmät jotka mua katsoo aina jos
      Ikävä
      63
      1276
    5. En kai koskaan saa sinua

      Koska et usko että riitäisit minulle. Olet aina pitänyt itseäsi liian risana ja heikkona. Katkot korkeutesi, ja poraat k
      Ikävä
      77
      1131
    6. HESARI: Kahden Pasin pankki OmaSp

      Toinen entinen työntekijä sanoi, että Turtio oli organisaatiossa “Jumalasta seuraava, ylöspäin” https://www.hs.fi/visio
      Seinäjoki
      27
      1123
    7. Minkä kultakimpaleen

      Menetän jos en saa häntä. Joku muu saisi nauttia siitä hellyydestä, huumorista ja intohimosta. Ehkä hän ymmärtää nyt mik
      Ikävä
      35
      1122
    8. Tykkäsit nainen

      Aina eniten lähetyssaarnaajassa, muistan miten nautit!😎😚 meidän pitää päästä vielä kokemaan se.
      Ikävä
      45
      1089
    9. Kerroppas nyt

      M mies, että kenestä sinä oikein tykkäät, niin saadaan tämä asia muillekin selväksi 😉
      Ikävä
      84
      1038
    10. Janne Ahonen E R O A A

      Taas 2 lasta jää vaille ehjää perhettä!
      Kotimaiset julkkisjuorut
      96
      1013
    Aihe