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. Mikä kaivatussasi

      on parasta?
      Ikävä
      93
      1496
    2. Olivia Oras

      "Yle MOT:n tietojen mukaan Oras oli joutunut sairaalahoitoon helsinkiläisellä kauneusklinikalla tehdyn rasvaimun yhteyde
      Kotimaiset julkkisjuorut
      92
      1305
    3. Koska muru nähdään

      Kaksin?
      Ikävä
      47
      901
    4. Sanoppa ihan rohkeasti

      Mun huonot puolet! En suutu…
      Ikävä
      95
      875
    5. Sinisilmäiselle tutulle miehelle

      Iltaisin ikävä pahenee ja olet usein mielessä. Toivon merkitseväni sinulle paljon. On ihan hirveän vaikeaa miettiä, mit
      Ikävä
      67
      856
    6. Nainen ... ala olemaan miehille täysin hyödytön

      Otsikossa on paras neuvo jokaiselle naiselle, jonka hän voi koskaan saada. Moni mieshän ajattelee jo nyt, että naiset o
      Sinkut
      164
      813
    7. MOT: Nuoren Olivia Oraksen, 27 surullinen kuolema kauneusoperaatiossa :(

      MOT:n tietojen mukaan Oras menetti tajuntansa rasvaimua edeltäneessä puudutuksessa. Hänet kuljetettiin Husiin, ja hän ku
      Maailman menoa
      85
      779
    8. Et vaan tajua

      Että rakastan sua
      Ikävä
      20
      729
    9. Haluatko että unohdan sinut kokonaan

      Siihen suuntaan ollaan menossa, nyt jo. Ja ehkä parempi näin, niin ei kulu energiaa hukkaan mahdottomuuteen. Ja vaikka j
      Ikävä
      57
      707
    10. Olen jo oppinut tuntemaan

      sinun kirjoitustyylisi
      Ikävä
      53
      648
    Aihe