Bilde Koder for HTML med bredde og høyde
Nettstedet skaperne kan inkludere bilder på sidene sine ved hjelp av enkel HTML-kode. De fleste nettsteder bruker en kombinasjon av HTML og Cascading Style Sheet kode for å bestemme layout og utseende av elementer, inkludert deres dimensjoner. Nettsteder trenger ikke å angi bredden og høyden på bilder som standard, men kan velge å gjøre det ved hjelp av både HTML og CSS-kode. Spesifisere høyden og bredden av bilder på websider er vanligvis enkel.
HTML-attributter
En webside kode kan angi bredde og høyde for et bilde ved hjelp attributter av bildeelement. Følgende eksempelkode demonstrerer skape et bilde og angi bredden og høyden på samme linje med kode: <img alt = "bilde" width = "200px" height = "150px" />
Denne koden angir bildet, som i dette tilfellet ville bli lagret i en katalog som heter "bilder", i samme mappe som selve nettsiden. Bredde og høyde attributter er valgfrie, så hvis de ikke er tatt med i bildet vises på standarddimensjoner.
CSS velgere
Web-side kode kan håndheve bredde og høyde for bilder med klassen og ID-attributter. CSS koden bruker disse egenskapene til å identifisere HTML-elementer på en side, implementere de angitte stilregler på disse elementene. Følgende HTML kode oppretter et bilde med et ID-attributt: <img alt = "bilde" id = "pic" />
En spesifikk ID-attributtet bør bare forekomme én gang i løpet av en enkelt nettside. CSS-koden inkludert eller koblet til fra innenfor siden hodedelen kan style dette bildet som følger:
pic {
width: 200px;
height: 150px;
}
Følgende HTML erklærer et bilde med en klasse attributt: <img alt = "bilde" class = "bilde" />
CSS-kode kan style det slik:
img.pic {
width: 200px;
height: 150px;
}
Inline CSS
CSS-kode kan style HTML bildeelementer direkte i siden markup. Følgende HTML syntaks demonstrerer denne teknikken: <img alt = "bilde" style = "width: 200px; height: 150px" />
Dette har en lignende effekt til koden angi bredde og høyde attributter av bildeelement. Hvis det angitte bredden og høyden er ikke de naturlige dimensjonene på bildefilen, håndheve bredden og høyden kan forvrenge bildet slik det vises i websiden.
Parent Element
Web-side kode kan spesifisere visse stilregler for bilder ved å henvise til sine overordnede elementer. Følgende HTML markup erklærer et bilde inne i en "div" element med en bestemt klasse attributt: <div class = "picholder"> <img alt = "bilde" /> </ div>
CSS-koden for siden kunne spesifisere styling for bildet og den overordnede element som følger:
div.picholder {
width: 400px;
height: 300px;
}
div.picholder img {
width: 50%;
høyde: 50%;
}
Denne koden angir bildeelement dimensjoner som en prosentverdi av den angitte bredden og høyden for elementet holder den.