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

375

    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. Yritykset verolle ja yritystuet 10 mrd. eur/v pois

      Kiristämistapauksissa yrityksille sanotaan hei hei. Suomi ei tarvitse yhteiskunnan rahoilla "yrittämistä". Yhteiskunta v
      Maailman menoa
      113
      2332
    2. Sannalta jälleen fiksu lausunto johtamisesta

      "I used to think the best argument would win – but real leadership means listening, understanding where people come from
      Maailman menoa
      34
      1912
    3. Sanna Antikainen (ps) : Vornasen pyssy suututti demarit

      https://www.suomenuutiset.fi/sanna-antikaisen-kolumni-vornasen-pyssy-suututti-demarit-mutta-kuka-puhuu-totta/ Vornasen
      Maailman menoa
      28
      1872
    4. Mikä on sinun ja kaivattusi ikä

      💕💕💕💕
      Ikävä
      102
      1856
    5. Riikka se runnoo työttömyyttä lisää

      Menkää töihin! "15–74-vuotiaiden työttömyysasteen trendiluku oli lokakuussa 10,3 prosenttia. Työttömiä oli yhteensä 276
      Maailman menoa
      48
      1855
    6. Hallinto-oikeus totesi Sysmän kunnanjohtajan potkut laittomiksi (YLE Lahti 24.11.2025)

      Että näin sitten: Hallinto-oikeus totesi Sysmän kunnanjohtajan potkut laittomiksi – valtuuston päätös nurin ja 50 000 la
      Sysmä
      57
      1142
    7. Onko sulla jotain

      Suunnitelmia?
      Ikävä
      110
      1046
    8. Poistettuun aloitukseen

      Ei se mulle ollut varmastikaan. En usko vaik sille tuntuukin että oisit voinut olla eräs. Mut niin mäkin pelkään. Ei
      Suhteet
      20
      923
    9. Vaikeneminen

      Tylsää kun nainen meni kuoreen 🫤
      Ikävä
      54
      870
    10. No miten meni?

      Onko voittaja olo? Tunnetko onnistumisen riemua? Vastasiko lopputulos odotuksia? Kauaksi ajettu 😘
      Ikävä
      110
      847
    Aihe