Design web responsiv - Imagini
Indiferent de dimensiunea ecranului, o imagine responsivă se adaptează automat pentru a se potrivi.
Utilizarea proprietății width
O cale de a obține o imagine responsivă este un width procentual cu height setat la auto. Pe măsură ce redimensionezi browserul, imaginea se mărește și se micșorează odată cu el.
Notă: Această abordare permite imaginii să crească peste dimensiunea sa originală, așa că în multe cazuri max-width este alegerea mai bună.
Exemplu
width: 100% și height: auto pentru a o face responsivă. Folosiți orice URL de imagine de tip placeholder, precum „img_chania.jpg”.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image - width Property</title>
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect:</p>
<img src="img_chania.jpg" alt="Chania">
</body>
</html>
Utilizarea proprietății max-width
Un max-width de 100% permite imaginii să se micșoreze când este necesar, împiedicând-o totodată să depășească vreodată dimensiunea sa originală.
Exemplu
max-width: 100% și height: auto, astfel încât imaginea să se micșoreze, dar să nu se mărească niciodată peste dimensiunea sa originală.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image - max-width Property</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect. The image will never scale up to be larger than its original size.</p>
<img src="img_chania.jpg" alt="Chania">
</body>
</html>
Adăugarea unei imagini la pagina web exemplu
Exemplu
width: 100% și height: auto pentru a fi responsivă în conținutul paginii.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image in Web Page</title>
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Web Page with Image</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
<img src="img_chania.jpg" alt="Chania">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
</body>
</html>
Imagini de fundal
Redimensionarea și scalarea pot afecta și imaginile de fundal, iar tu ai de ales între trei metode diferite:
Folosind background-size: contain
Aici imaginea se scalează încercând să se încadreze în zona de conținut, în timp ce raportul de aspect (relația proporțională dintre lățime și înălțime) rămâne intact.
background-size: contain, background-repeat: no-repeat, o lățime de 100%, o înălțime de 400px, și un chenar negru solid de 1px.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image - Contain</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>background-size: contain</h2>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Folosind background-size: 100% 100%
Aici imaginea se întinde până când întreaga zonă de conținut este acoperită.
background-size: 100% 100%, o lățime de 100%, o înălțime de 400px, și un chenar negru solid de 1px.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image - Stretch</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>background-size: 100% 100%</h2>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Folosind background-size: cover
Scalarea continuă aici până când întreaga zonă de conținut este acoperită. Raportul de aspect se păstrează, așa că o parte din imagine poate fi decupată.
background-size: cover, o lățime de 100%, o înălțime de 400px, și un chenar negru solid de 1px.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image - Cover</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>background-size: cover</h2>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Imagini diferite pentru dispozitive diferite
Ce se potrivește unui ecran mare de computer poate fi inutil pe un dispozitiv mic, iar o imagine mare adaugă încărcare. Media queries reduc această încărcare afișând imagini diferite pe dispozitive diferite.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Different Images for Different Devices</title>
<style>
/* 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');
}
}
</style>
</head>
<body>
<h2>Different Images for Different Devices</h2>
<p>Resize the browser window to see the background image change at 400px.</p>
</body>
</html>
Elementul HTML <picture>
Pentru design-uri responsive, elementul HTML <picture> oferă mai multă flexibilitate în specificarea surselor imaginilor.
În loc să mărești sau să micșorezi o singură imagine odată cu lățimea ferestrei de vizualizare, oferi mai multe imagini, fiecare concepută pentru o altă dimensiune de ecran. Ca la <video> și <audio>, enumeri surse diferite, iar browserul o folosește pe prima care se potrivește.
Fiecare sursă își definește imaginea prin atributul obligatoriu srcset și poate accepta media queries prin atributul opțional media. Pentru browserele fără suport pentru <picture>, adaugă un element <img> ca variantă de rezervă.
Exemplu
<picture> cu două elemente <source> și o variantă de rezervă <img>. Un source trebuie să folosească un atribut media pentru max-width: 400px pentru a servi o imagine mai mică, iar celălalt servește o imagine mai mare.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The HTML picture Element</title>
</head>
<body>
<h2>The HTML picture Element</h2>
<p>Resize the browser window to load different images.</p>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>
Galerie de imagini responsivă
Flexbox și media queries pot lucra împreună pentru a produce o galerie de imagini responsivă.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.gallery img {
width: 100%;
padding: 4px;
}
/* One column (for small screens) */
.gallery img {
width: 100%;
}
/* Two columns (for medium screens) */
@media only screen and (min-width: 600px) {
.gallery img {
width: 50%;
}
}
/* Four columns (for large screens) */
@media only screen and (min-width: 992px) {
.gallery img {
width: 25%;
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<p>Resize the browser window to see the effect.</p>
<div class="gallery">
<img src="img_5terre.jpg" alt="Cinque Terre">
<img src="img_forest.jpg" alt="Forest">
<img src="img_lights.jpg" alt="Northern Lights">
<img src="img_mountains.jpg" alt="Mountains">
</div>
</body>
</html>