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. Ny se loppuu ( Kuhmo)

      Yhtiö on myyty. Notta yyteet meleko äkkiä, notta. Pelastautukoon ken voi. Notta se on tuulista pian.
      Kuhmo
      79
      2494
    2. Parikymppinen hakkasi nelikymppisen kriittiseen tilaan

      Ja ihminen jäi junan alle lautiosaaressa...paljon on taas sattunut ja tapahtunut. Ketähän nämä uhrit mahtaa olla 🤔 htt
      Kemi
      42
      2106
    3. Kaivattusi tärkein ulkoinen tuntomerkki

      Onko jokin muu kuin yleinen kuten kaunis, laiha. hyväkroppainen jne.
      Ikävä
      28
      955
    4. Mille kirjaimelle

      toivotat hyvää yötä , kuka on mielessäsi kun menet nukkumaan?
      Ikävä
      32
      847
    5. Äimän käki

      Olen vähää vaille viisikymppinen mies, ja olen elellyt ilman parisuhdetta parisen vuotta. Nyt vihdoin ja viimein tuntuu,
      Sinkut
      154
      788
    6. Nainen, miten suhtautuisit

      Jos mies ehdottaisi tapaamista? Entä siihen, jos mies kertoisi tapaamisessa tunteistaan ja haluaisi seurustella?
      Ikävä
      58
      650
    7. Paikallinen autokorjaamo

      Kyllä alkaa vituttamaan, palvelua haluaisi niin jono ovelle ja yksi myyjä. Auto valmistunut kuntoon niin kukaan ei ilmoi
      Kuhmo
      6
      528
    8. Kenen kanssa koet

      Että sinulla on eniten kipinää
      Ikävä
      21
      505
    9. Vihdoinkin tarjolla sushia!

      Onpa mukava, että tän paikkakunnan ruokatarjonta laajenee. Ensi lauantaina pääsee herkuttelemaan kun Kukkoloilta saa su
      Haapavesi
      78
      501
    10. Sinulle mies

      Kohtaamme jälleen kun on oikea aika. Sitä ei voi mikään eikä kukaan estää <3 <3
      Ikävä
      33
      482
    Aihe