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. Mulla on ikävä sua

      Pakko se on myöntää, mulla on ikävä sua 🥺💔.. En kyllä haluaisi sitä myöntää kun tämä tilanne on niin hankala. Oon yri
      Ikävä
      53
      1408
    2. Väleistä

      Minkälaiset välit sinulla on kaivattusi kanssa?
      Ikävä
      88
      948
    3. Koska tulet minulle näkyväksi

      Koska astut piilostasi esiin? Miksi pysyttelet niin kaukana? Etkö voisi tulla päättämään tämän ikävöinnin? Saisin vihdoi
      Ikävä
      44
      757
    4. Nainen, olet ihanin maan päällä

      Ei ole toista. Olet ihanteellinen, kaikkien mittapuitteni täyttymys. Sisäinen kauneutesi sinetöi ulkoisen ja juuri se sa
      Ikävä
      40
      740
    5. Poliis. Poliisi osoitti aseella Tampereella kun mies avasi oven

      Poliisi Poliisi osoitti aseella Tampereella, kun mies avasi siviili­poliisiauton oven Mies kuvasi keski­viikkoiltana bus
      Maailman menoa
      278
      696
    6. Romanttisinta

      Mitä hän on tehnyt sinulle?
      Ikävä
      49
      569
    7. Mikä on mielestäsi keskustelupalstan tarkoitus?

      Tuolla toisessa ketjussa kävi ilmi jotain minkä itse koen hieman hassuksi. Nykypäivänä yllättävän moni ilmeisesti kokee,
      Sinkut
      191
      547
    8. " Hae roolisi miljardien Pyhäjärveltä"?

      Perjantain 14.8. viesti TV:ssä oli hätkähdyttävän todellista kuultavaa. Tähän on tultu. Pyhäjärvi- selvitykseen, tied
      Pyhäjärvi
      62
      528
    9. Nyt aletaan terveydenhuollossa karsimaan "turhista" operaatioista

      Eräitä toimia ei enää tehdä, vaan yritetään korvata halvemmilla. Nykyään esimerkiksi polven tähystysleikkaukset lähes l
      Maailman menoa
      110
      517
    10. Sano rakkaallesi

      Suorat sanat! Mikä mieltä kaihertaa!
      Ikävä
      43
      509
    Aihe