Kuvan croppaus pelkällä CSS:llä

[weatherc]

Oppisin jotain uutta
Olen tähän asti ollut luulossa että kuvan osittainen näyttäminen vaatii phpGD-häkkyrää tai vastaavaa tapaa napata haluttu osa siitä kuvasta varsinkin jos haluaa myös muuttaa sen kokoa.
Eheps.

Homma onnistuu myös pelkällä CSS:llä.
Ja se toimii kaikissa selaimissa.
Itse häkkyrä on jokseenkin sekava mutta muutaman trial-errorin jälkeen alkaa pääsemään jyvälle.

- Laita kuva sivulle ja aseta sille class-nimi, tässä esimerkissä "tiekamera" sekä paketoi hienous vaikka diviin jossa style position:relative

Koodi [Valitse] Laajenna

<div style="position:relative;">
<img class="tiekamera" src="kuva.jog" alt="joku hyvä Googleruoka tähän"/>
</div>

- Tee kuavlle CSS:ään tiedot

Koodi [Valitse] Laajenna

.tiekamera
{
width:420px;
height:345px;
position:absolute;
clip:rect(10px,410px,330px,15px);
}

Otetaanpa tuo tarkempaan syyniin:

width:420px; ---> haluttu leveys + mahdollinen vasen piiloosa
height:345px; ---> haluttu korkeus + mahdollinen ylä piiloosa
clip:rect(10px,410px,330px,15px) --->
10px - yläpiiloosa
410px - haluttu leveys
330px - haluttu korkeus
15px - vasen piiloosa

Ihmellystä voi ihmetellä livenä nordicweatherin etusivun ja webkamerasivun tiekameroissa jossa laitojen mustat raidut on piilotettu