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

501

    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. Marinin hallituskaudella Suomen BKT sentään kasvoi

      Tämä ns. kauhukabinetti ei ole saanut aikaan kuin vahinkoa. Otti ennätysvelat rikkaiden veroalennuksiin ja sai työttömyy
      Maailman menoa
      8
      2062
    2. Huulitäytteet ja tekotisssit

      Kylillä kulkiissa olen huomannut että tässäkin tuppukylässä on hameväki alkanut muokkaamaan ulkonäköään huulitäytteillä
      Suomussalmi
      110
      1431
    3. Drone-epäily Uudellamaalla

      Ihmisiä kehotetaan siirtymään sisätiloihin. https://www.is.fi/kotimaa/art-2000012008358.html
      Maailman menoa
      120
      1185
    4. Sait mut mies heikoksi

      Yllätti tämä asia nyt kyllä. Olet ollut mielessä koko ajan. Ei riitä pelkkä kevät nyt syyksi. Veit jalat alta. Pannaan m
      Ikävä
      86
      1074
    5. Vauvat syntyvöät vihan lapsina?

      Kyllä on pimeä oppi, ja olen ollut täydessä pimeydessä opillisesti, että pienet lapset syntyisivät paholaisen lapsina. O
      Luterilaisuus
      66
      1025
    6. Nuorille miehille ei kelpaa enää paljon käytetty nainen

      "En ikinä huolisi mitään kyläpyörää", Tomi täräyttää TikTokissa https://www.iltalehti.fi/kotimaa/a/27182b8f-7759-49d0-8
      Sinkut
      192
      1010
    7. Unelma tilanne

      Miten haluaisit, että tilanteenne etenisi tai miten toivoisit hänen lähestyvän sinua? Vai toimitko mielummin itse, jos j
      Ikävä
      67
      795
    8. Itsensä pidättely

      Pidätteletkö tunteitasi tai itseäsi hänen aikanaan ja jos niin miksi?
      Ikävä
      76
      760
    9. Stefan Therman. Vakava syyte ja vankila uhkaa.

      Nyt ei taida mies selvitä enää selityksillä.
      Kotimaiset julkkisjuorut
      73
      642
    10. Iivarilla johtopäätösten aika

      Kun veteraanipolitikko ja pumppuvoimalavastustaja Pikkarainen aloittaa eilen nähdyn ulosmarssin on Iivarilla johtopäätös
      Kemijärvi
      36
      622
    Aihe