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

462

    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. Asiakkaalle ei myyty energiajuomaa - tuomio tuli syrjinnästä

      Vaikka oli ilmeisesti täysi-ikäinen. Tosin ei lapsiakaan saisi syrjiä, koska oppivat helposti itsekin syrjimään, jos koh
      Maailman menoa
      82
      4260
    2. Jos venäjällä olisi kansan valitsema presidentti, olisiko Ukrainan sotaa?

      Ei varmasti olisi. Sehän on tiedossa, että raskaalla vaalivilpillä putin jatkaa pressana.
      Maailman menoa
      116
      3293
    3. Pakkoruotsista luopumalla kymmenien miljoonien säästöt

      Pakkoruotsin opiskelun kustannuksista ei ole juurikaan tehty kustannusselvityksiä, mutta joidenkin arvioiden mukaan siit
      Maailman menoa
      121
      3277
    4. Luterilaisen kirkon koko kastekaava on väärä

      Uudessa testamentissa on kaksi täysin ristiriidassa olevaa kastekäskyä Matt 28:19 ja Ap. t. 2:38. Matteuksen evankeluimi
      Kaste
      41
      2724
    5. Miten Yxäri iskettiin?

      Voisin tässä unta odotellessani kertoa, miten mieheni lähestyi minua. Tunsimme entuudestaan. Hän kyseli minulta aina j
      Sinkut
      218
      2514
    6. "Kostokakka!" Farmi Suomen pehtoori avaa sanaisen arkkunsa Frederikin haisevasta jäynästä

      Voi hyvänen aika Reetun touhuja! Pehtoori Terho Häkkinen sai ennen näkemätöntä höykytystä heti Farmi Suomi -realityn alk
      Tv-sarjat
      19
      2171
    7. Katsoitko Petolliset, mitä mieltä?

      Vanajanlinnan käytävät ja salongit täyttyvät jälleen kuiskailuista, salaisuuksista ja petoksista. Petollisten uudella
      Tv-sarjat
      11
      2006
    8. Ei se halua mitään!!

      Arkailija koko tyyppi!
      Ikävä
      29
      1944
    9. Onko Janne Naakka tuttu kasvo ja mitä mieltä olet Farmi-kokoonpanosta?

      Somevaikuttaja Janne Naakka on tubettaja ja bloggaaja sekä yksi uuden Farmi Suomi -kauden kisaajista. Naakka tuottaa mm.
      Tv-sarjat
      0
      1903
    10. Ylen juontaja möläytti suorassa radio-ohjelmassa

      Ylen Radio Suomen juontaja Samuli Aaltonen käytti törkeää kieltä maanantaiaamupäivän Koko Suomen radio -ohjelman lähetyk
      Maailman menoa
      45
      1886
    Aihe