Responsiewe webontwerp – prente
Verander die grootte van die blaaiervenster om te sien hoe die prent skaal om by die bladsy te pas.
Gebruik die breedte-eienskap
As die widtheiendom op 'n persentasie gestel is en die heighteiendom is op "outo" gestel, sal die prent reageer en op en af skaal:
Voorbeeld
img {
width: 100%;
height: auto;
}
Let daarop dat die prent in die voorbeeld hierbo opgeskaal kan word om groter as sy oorspronklike grootte te wees. ’n Beter oplossing sal in baie gevalle wees om eerder die
max-widtheiendom te gebruik.
Gebruik die maksimum-breedte-eienskap
As die max-widtheiendom op 100% gestel is, sal die prent afskaal as dit moet, maar moet nooit opskaal om groter as sy oorspronklike grootte te wees nie:
Voorbeeld
img {
max-width: 100%;
height: auto;
}
Voeg 'n prent by die voorbeeldwebblad
Voorbeeld
img {
width: 100%;
height: auto;
}
Agtergrond beelde
Agtergrondprente kan ook reageer op die verandering van grootte en skaal.
Hier sal ons drie verskillende metodes wys:
1. As die background-sizeeiendom op "bevat" gestel is, sal die agtergrondprent skaal en probeer om by die inhoudsarea te pas. Die beeld sal egter sy aspekverhouding behou (die proporsionele verhouding tussen die beeld se breedte en hoogte):
Hier is die CSS-kode:
Voorbeeld
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. As die background-sizeeiendom op "100% 100%" gestel is, sal die agtergrondprent strek om die hele inhoudsarea te dek:
Hier is die CSS-kode:
Voorbeeld
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. As die background-sizeeiendom op "cover" gestel is, sal die agtergrondprent skaal om die hele inhoudsarea te dek. Let daarop dat die "omslag"-waarde die aspekverhouding behou, en 'n deel van die agtergrondprent kan geknip word:
Hier is die CSS-kode:
Voorbeeld
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Verskillende beelde vir verskillende toestelle
'n Groot beeld kan perfek wees op 'n groot rekenaarskerm, maar nutteloos op 'n klein toestel. Hoekom 'n groot prent laai as jy dit in elk geval moet afskaal? Om die vrag te verminder, of om enige ander redes, kan jy medianavrae gebruik om verskillende beelde op verskillende toestelle te vertoon.
Hier is een groot prent en een kleiner prent wat op verskillende toestelle vertoon sal word:
Voorbeeld
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Jy kan die medianavraag gebruik min-device-width, in plaas van min-width, wat die toestelwydte nagaan, in plaas van die blaaierwydte. Dan sal die prent nie verander wanneer jy die grootte van die blaaiervenster verander nie:
Voorbeeld
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Die HTML <prent> Element
Die HTML <picture>-element gee webontwikkelaars meer buigsaamheid om beeldbronne te spesifiseer.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.