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

512

    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. Orpo räyhää: kansan on muututtava

      Orpon mukaan kansa ei elä kokoomuksen kanssa samassa todellisuudessa, ja sen vuoksi kansan on muututtava. Kas kun ei san
      Maailman menoa
      266
      3302
    2. Muovikassikartelli

      Kauppaketjut ovat yhdessä sopineet muovikassin yksikköhinnaksi 59 senttiä. Milloin viranomaiset puuttuvat tähän kartell
      Talousrikokset
      20
      1829
    3. Aidon persun tunnistaa Marinin palvonnasta

      Oli kyse sitten Halla-ahosta tai Putinista. Ensimmäisenä aidolle persulle tulee mieleen Marin.
      Maailman menoa
      24
      1499
    4. Mikä tekee sen

      Vetovoiman kaivatussasi?
      Ikävä
      81
      1334
    5. Harmittaako joku

      Harmittaako joku asia tai asiat, mitä on tapahtunut tai jäänyt tapahtumatta?
      Ikävä
      137
      1038
    6. Miksi et vain uskalla!?

      On niin ikävä...
      Ikävä
      81
      994
    7. Hallintooikeus..

      "Asemakaavapäätös pysyy voimassa.Poikkeamista ja rakentamista koskevat luvat hylättiin" kertoo Pyhäjärven Sanomat netti.
      Pyhäjärvi
      61
      799
    8. Olen rakastunut

      varattuun joka ei eroa. Miten tunteista eroon? Tämä ei ole tavanomaista. On elämäni suuri rakkaus.
      Ikävä
      86
      746
    9. Jos se joskus oli molemminpuolista

      niin hyvin me molemmat onnistuttiin pitämään toinen epätietoisena.
      Ikävä
      61
      677
    10. Laita nyt se viesti

      Tiedän että haluat tavata. Kirjoitat, pyyhit, kirjoitat... Lähetä se viesti 😗
      Ikävä
      50
      626
    Aihe