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

506

    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. Veroaste on Suomessa viitisen prosenttiyksikköä liian matala

      Veropohjaa on rapautettu käytännössä koko kulunut vuosituhat, jonka vuoksi valtion menoja on jouduttu rahoittamaan velka
      Maailman menoa
      114
      2758
    2. EU komissio - EU-elpymisrahoja voidaan käyttää TILAPÄISESTI väärin!

      Espanja ohjasi miljardeja euroja – Nyt EU-komissio teki yllättävän paljastuksen Skandaaliksi noussut Espanjan EU-rahoje
      Maailman menoa
      29
      1341
    3. Kultasi eka kirjain? Kuka haluaa

      A haluaa J
      Ikävä
      103
      1207
    4. Kristillinen kaste annetaa upotuskasteena

      Kristillinen upotuskaste perustuu juutalaiseen mikve-kasteeseen, jossa upottaudutaan veden alle kokonaan. Paavali vertas
      Kaste
      162
      1007
    5. Koko kansan kaste Punaisen meren ylityksen aikana

      Koko Israelin 2,5 milj.kansa sai kasteen ja Pyhän Hengen lahjan ylittäessän Punaisen meren. 1.Kor.10 1 Sillä minä en ta
      Kaste
      366
      997
    6. Empaattisuus ja suoruus.

      Tässä tullut noita pehmeitä asioita pohdittua, mutta toisaalta olen myös yksinkertainen mies. Pidän suoruudestakin. Mi
      Sinkut
      133
      958
    7. Nainen, mikset lähetä

      miehelle viestiä? Tiedän, että sulla on asiaa ja kysyttävää.
      Ikävä
      56
      855
    8. Ehkä vähän

      Rakastunut sinuun
      Ikävä
      40
      688
    9. Sä saat mut tuntemaan

      Jotain sellaista mitä ei saisi tuntea mutta må en mahda tälle mitään. Mulla on ikävä niitä meidän katseita ja sitä tunne
      Ikävä
      22
      683
    10. Tunnettujen vanhempien lapset, tv-sarja

      Tunnettujen vanhempien lapset saa tv-sarjan. Juurihan yksi heistä oli MTV:ssä 6.5.26 kertomassa ettei halua julkisuutta
      Kotimaiset julkkisjuorut
      110
      632
    Aihe