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. Joko seuraava hallitus uskaltaa puuttua 7,5 viikon vuosilomiin

      Onhan se törkeää eriarvoisuutta ja verovarojen törkeää tuhlausta.
      Maailman menoa
      134
      752
    2. Kysymys

      Pystyisitkö tutustuu kaverina tai alkaa parisuhteeseen skitsofreenikon kanssa? T.Skitosoaffektiivinen (parantunut) Ois
      Sinkut
      197
      710
    3. Kyllä mä tiedän et me kuulutaan yhteen ja se on tähtiin kirjoitettu!!

      En vain halua satuttaa sua. Olen aivan perseestä epävakaan ja ADHD oireiluin vuoksi. Ja kun olisi aika "vapauttaa" ne su
      Ikävä
      47
      657
    4. Metsamanin muru kissa kuollut

      Nyt siellä surraan muru kissaa päivä tolkulla,vaikka muuten ei oo välittänyt mitenkään siitä,kun joka videolla vaan mars
      Tuusniemi
      99
      651
    5. Töysä otsikoissa

      Töysässä takavarikoitu kaksi luvallista käsiasetta ammuskelun jälkeen!Näin media uutisoi!
      Alavus
      27
      641
    6. Lähdetkö kanssani

      syömään joskus😘
      Ikävä
      61
      629
    7. 47
      580
    8. Mistäkö haaveilen

      Tällä hetkellä. Siitä, että kohtaamme, vetovoima on jäljellä ja saisimme olla aivan kahden, ei tarvitsisi välittää mistä
      Ikävä
      29
      531
    9. Tapailtaisko nainen

      Meidän kotien puolessavälissä suunnilleen, vähä niinku salaa. Siinä on yks kiva paikka joka sopis hyvin. Mieheltä
      Ikävä
      59
      525
    10. Kuinka hyvin kestäisit?

      Oletko miettinyt, että mitä jos olisit pyöreä pullukka ja vielä ruma niin kestäisitkö vai masentuisitko?
      Sinkut
      102
      520
    Aihe