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

    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. Kuka sitä naista maalittaa

      Täällä oikeasti?
      Ikävä
      201
      1611
    2. Voisin jopa maksaa että saisin nähdä sut mies

      Miten helvetissä joku voi olla tollanen kotihiiri. Edes mä en ole noin paha ku sä! Miten sua voi ikinä edes nähdä ?
      Ikävä
      58
      1021
    3. Anteeksipyynnöstä

      Uskotko anteeksipyynnön voimaan? Mikä tekee anteeksipyynnöstä vaikeaa? Onko se mielestäsi joskus turhaa, joko pyytäjän
      Ikävä
      140
      954
    4. Oletko päässyt minusta

      Eteenpäin?
      Ikävä
      85
      912
    5. Ei kukaan ole katsonut

      Kuten sinä. Niin välittävä ja hellä katse.
      Ikävä
      61
      906
    6. Tumman vihreä mercedes

      Mikä se on tuo kylää ympäri ajava vihreä mercedes, takakontti tärisee kuin hullu ja välillä kylän juoppojakin kuskailee,
      Hyrynsalmi
      11
      780
    7. Martinan tarve valehdella.

      Miksiköhän Martina valehtelee niin paljon,onko hän tietoinen siitä että valheistaan jää useimmiten kiinni? Esimerkkinä t
      Kotimaiset julkkisjuorut
      266
      776
    8. Olisitko oikeasti valmis rikkomaan

      Perheesi? En haluaisi sitä, mutta ne on teidän välisiä asioita. Voin olla sinulle vain kaverikin… ei paineita. Minä kesk
      Ikävä
      61
      722
    9. Stubb munasi - Suomessa kuuluu liputtaa Suomen lipulla

      Presidentinlinnan ja Mäntyniemen salkoihin nostettiin sateenkaariliput lauantaina. Suurin osa kansasta ei varmasti pidä
      Maailman menoa
      342
      721
    10. Miksi tällainen pelottaa ja aiheuttaa joillakin ärtymystä?

      "Sitoudun ystävien ja kollegoiden kanssa puuttumaan seksistisiin vitseihin ja vähättelyyn. Sanon ääneen, kun jokin ei ol
      Maailman menoa
      75
      717
    Aihe