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

488

    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. Suomessa on meneillään boomereiden kosto

      1990-luvun lamassa osumaa saaneet sukupolvet toivovat sen jälkeen syntyneille sukupolville kärsimystä porvareita äänestä
      Maailman menoa
      90
      2723
    2. IPCC romahtaa

      Mitenkäs tässä nyt näin kävi? Ilmastohourimoinnin tukijalka myöntää, ettei mitään ilmastokatastrofia olekaan. Eikös tääl
      Ilmastonmuutos
      55
      1947
    3. Petteri Orpon kommentti persujen väkivaltaan?

      Hiirenhiljaa taas on, kun Tampereella persulahkon ääriosasto pahoinpiteli kantasuomalaisen tytön. Missä on pääministeri
      Maailman menoa
      115
      1945
    4. Toiko Helen laivalastillisen vieraslajeja Suomeen?

      Loviisan satamaan tuotiin laiva­lastillinen pähkinän­kuoria Norsun­luu­rannikolta Loviisan satamaan kiinnittyi vapun al
      Maailman menoa
      33
      1616
    5. Mitä ikävöit eniten

      kaivatussasi? 🫶
      Ikävä
      93
      1560
    6. Onko sinulla jalostettu koira? Nämä tekijät altistavat koiran sairastumiselle

      Moni Suomessa suosittu koirarotu on sairas ulkonäkökeskeisen jalostuksen ja ääripiirteiden vuoksi. Erityisesti tietyt t
      Koirat
      27
      1530
    7. Miten voit vain

      Olla kuin mitään ei olisi?
      Ikävä
      141
      1274
    8. Anabaptismin kirous

      Uudestikastetut lahkolaiset joutuvat valheen kierteeseen. He joutuvat herjaamaan lapsena saamaanssa kastetta nimeen Isä
      Kaste
      416
      1103
    9. Robotiikka korvaa tulevaisuudessa seurustelusuhteet

      Haluan herättää keskustelua aiheesta. Asiantuntijoiden mukaan robottien kehitys on 10-15 vuoden päässä siitä että voidaa
      Sinkut
      254
      997
    10. Pelolla pakottaminen

      Kristinusko on tuovinaan valoa ja toivoa, mutta ensin pitää olla pimeyttä ja toivottomutta jotta joku valoa ja toivoa ha
      Kaste
      624
      976
    Aihe