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. Mitä tuot pöytään parisuhteessa?

      Siinäpä se kysymys on otsikossa. Mitäpä siis tuot/toisit pöytään parisuhteessa? Oletko mies vai nainen? Koetko sen mitä
      Sinkut
      344
      1262
    2. Mikä sinua ja kaivattuasi

      Yhdistää??????
      Ikävä
      54
      753
    3. 2 km on nykyään liian pitkä koulumatka

      Hesarissa päivitellään lapset joutuu nyt kulkemaan 2 km kouluun jösses. Ruostefillarilla tuo matka menee vaikka miten äk
      Lieksa
      55
      738
    4. Sinulle mies

      Kohtaamme jälleen kun on oikea aika. Sitä ei voi mikään eikä kukaan estää <3 <3
      Ikävä
      38
      725
    5. Martinan bisneksillä ei mene hyvin

      https://www.iltalehti.fi/viihdeuutiset/a/c46da6ab-340f-4790-aaa7-0865eed2336 Yrityksen konkurssihakemus on tullut kärä
      Kotimaiset julkkisjuorut
      152
      633
    6. Miia Heikkinen avautui !

      Olipa hyvä kirjoitus, kiitos. Ongelmat mitkä nostat esille on todellisia ja tämä ylimielisyys totta ja se näkyy kaikessa
      Judo
      59
      616
    7. 45
      604
    8. Tiesitkö? Martina Aitolehden isäpuoli on tämä suosittu laulaja

      Martina Aitolehti on seurattu julkisuuden henkilö. Lähipiiriin mahtuu muitakin tunnettuja henkilöitä. Tiesitkö, että Ma
      Kotimaiset julkkisjuorut
      26
      591
    9. 56
      572
    10. Voiko meidän välit

      Koskaan parantua tästä?
      Ikävä
      43
      530
    Aihe