Utilizarea Lățimea Proprietatea
În cazul în care width proprietatea este setată la 100%, imaginea va fi receptiv și scară în sus și în jos:
Observați că, în exemplul de mai sus, imaginea poate fi extinsă pentru a fi mai mare decât dimensiunea originală. O soluție mai bună, în multe cazuri, va fi de a utiliza max-width proprietate în loc.
Folosind-max Lățimea de proprietate
În cazul în care max-width proprietatea este setată la 100%, iar imaginea va scară în jos dacă are, dar niciodată nu scară până să fie mai mare decât dimensiunea originală:
Adăugați o imagine la exemplul Web Pagina
Imagini de fundal
Imaginile de fundal pot răspunde, de asemenea, la redimensionarea și scalarea.
Aici vom arăta trei metode diferite:
1. În cazul în care background-size proprietate este setată la "contain" , imaginea de fundal va scară, și să încerce să se potrivească zona de conținut. Cu toate acestea, imaginea va păstra raportul de aspect (relația proporțională dintre lățimea și înălțimea imaginii):
Aici este codul CSS:
Exemplu
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
} Încearcă - l singur » 2. În cazul în care background-size proprietate este setată la "100% 100%" , imaginea de fundal se va întinde pentru a acoperi întreaga suprafață de conținut:
Aici este codul CSS:
Exemplu
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
} Încearcă - l singur » 3. În cazul în care background-size proprietate este setată la "cover" , imaginea de fundal va scala pentru a acoperi întreaga suprafață de conținut. Observați că "cover" , valoarea menține raportul de aspect, iar o parte a imaginii de fundal poate fi tăiate:
Aici este codul CSS:
Exemplu
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} Încearcă - l singur » Imagini diferite pentru diferite dispozitive
O imagine mare poate fi perfect pe un ecran de computer mare, dar inutil pe un dispozitiv mic. De ce să încărcați o imagine mare atunci când trebuie să-l scară în jos, oricum? Pentru a reduce sarcina, sau pentru alte motive, puteți utiliza interogări media pentru a afișa imagini diferite pe diferite dispozitive.
Aici este o imagine mare și o imagine mai mică, care va fi afișată pe diferite dispozitive:
Exemplu
/* 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');
}
} Încearcă - l singur » Puteți utiliza interogarea media min-device-width , în loc de min-width , care verifică lățimea dispozitivului, în loc de lățimea browser - ului. Apoi, imaginea nu se va schimba atunci când redimensiona fereastra de browser:
Exemplu
/* 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');
}
} Încearcă - l singur » HTML5 <picture> Element
HTML5 a introdus <picture> elementul, care vă permite să definiți mai mult de o imagine.
Suport pentru browser-
| Element | |||||
|---|---|---|---|---|---|
| <picture> | Nu sunt acceptate | 38.0 | 38.0 | Nu sunt acceptate | 25.0 |
<picture> elementul funcționează similar cu <video> și <audio> elemente. Ați înființat surse diferite, iar prima sursă care se potrivește preferințelor este cel utilizat:
Exemplu
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture> Încearcă - l singur » srcset este necesar atributul, și definește sursa imaginii.
media atribut este opțional și acceptă interogări media pe care le găsiți în regulă CSS @media .
Tu ar trebui să definească , de asemenea , un <img> Element pentru browserele care nu acceptă <picture> element.