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

545

    Vastaukset 6

    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. El Khamenein arkku K-Kaupan autossa?

      Kyllä kauppias hoitaa?
      Maailman menoa
      146
      1286
    2. Mahdoton tilanne

      Täällä monella tuntuu olevan jumissa oleva tilanne. Joillakin kaipuu ja ikävä on kestänyt jo vuosia. Osapuoli/puolet ova
      Ikävä
      97
      929
    3. Välillä tulee haikeus

      Et kaikki päättyi näin. Etten saanut vastauksia. Ei meitä oltu tarkoitettu. Niin se vain on.
      Ikävä
      78
      874
    4. Tunteilla leikkiminen

      Oletko leikkinyt kaivattusi tai jonkun kiinnostuneen tunteilla, pelannut jotain peliä tai pelleillyt asioilla? Miksi?
      Ikävä
      113
      815
    5. Ne katseet, ei niitä

      Voi unohtaa. Se, miten molemmat katsoi
      Ikävä
      35
      645
    6. Miten jotkut kehtaa aikuisiällä kiusata

      Ihmisiä? Eikö se ole aika noloa?
      Ikävä
      100
      558
    7. Mä olin ihan peloissani sun lähellä

      Huomasitko? En uskaltanut edes katsoa sua. Näin sivu silmällä sun vinon hymyn. Oliko hyvä vai paha juttu kun tulit lähel
      Ikävä
      21
      536
    8. On ikävä sinua ihana

      En jaksa syvempiä tuntoja enää kirjoittaa. Kaipaan sinun läsnäoloa ja läheisyyttä nainen. Hyvää yötä.
      Ikävä
      28
      523
    9. Mitä jos näkisimme

      Vyöryisikö samat tunteet uudelleen?
      Ikävä
      45
      514
    10. Kaipaamalleni naiselle

      Hyvää iltaa! Täytyy vain toivoa että törmäämme toisiimme pian Toivoo. mies
      Ikävä
      29
      457
    Aihe