Korzystanie szerokości obiekt
Jeżeli width właściwość jest ustawiona na 100%, że obraz będzie elastyczne i skalowanie w górę iw dół:
Należy zauważyć, że w powyższym przykładzie, obraz może być zwiększana, aby była większa niż jego pierwotnego rozmiaru. Lepszym rozwiązaniem, w wielu przypadkach, będzie korzystać z max-width właściwość zamiast.
Korzystanie właściwość max-width
Jeżeli max-width właściwość jest ustawiona na 100%, obraz zostanie przeskalowany w dół, jeśli ma, ale nigdy nie skala się być większy niż jego oryginalnym rozmiarze:
Dodaj grafikę do przykładu Web Page
Obrazy tła
Obrazy tła mogą również odpowiedzi na zmianę rozmiaru i skalowanie.
Tutaj pokażemy trzy różne sposoby:
1. Jeżeli background-size właściwość jest ustawiona na "zawiera", obraz tła będzie skala i spróbować zmieścić obszarze zawartości. Jednakże obraz zachowa proporcje (proporcjonalna zależność między szerokości obrazu i wysokości):
Oto kod CSS:
Przykład
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
} Spróbuj sam " 2. Jeżeli background-size właściwość jest ustawiona na "100% 100%", obraz tła będzie się rozciągać na pokrycie całego obszaru treści:
Oto kod CSS:
Przykład
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
} Spróbuj sam " 3. Jeżeli background-size właściwość jest ustawiona na "cover" , obraz tła będzie skalować na pokrycie całego obszaru zawartości. Zauważ, że "cover" wartość zachowuje proporcje, a niektóre części obrazu tła może być przycięty:
Oto kod CSS:
Przykład
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} Spróbuj sam " Różnych obrazów dla różnych urządzeń
Duży obraz może być idealny na dużym ekranie komputera, ale bezużyteczne na małym urządzeniu. Dlaczego załadować duży obraz, gdy trzeba przeskalować go tak? Aby zmniejszyć obciążenie, lub z jakichkolwiek innych powodów, można użyć zapytań o media do wyświetlania różnych obrazów na różnych urządzeniach.
Oto jeden duży obraz i jeden mniejszy obraz, który będzie wyświetlany na różnych urządzeniach:
Przykład
/* 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');
}
} Spróbuj sam " Można użyć zapytania mediów min-device-width , zamiast min-width , który sprawdza szerokość urządzenia, zamiast szerokości okna przeglądarki. Potem obraz nie zmienia się przy zmianie rozmiaru okna przeglądarki:
Przykład
/* 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');
}
} Spróbuj sam " HTML5 <picture> Element
HTML5 wprowadzono <picture> , element, który pozwala zdefiniować więcej niż jedno zdjęcie.
Pomoc Browser
| Element | |||||
|---|---|---|---|---|---|
| <picture> | Nieobsługiwany | 38,0 | 38,0 | Nieobsługiwany | 25,0 |
<picture> Element działa podobnie do <video> i <audio> elementów. Skonfigurowanie różnych źródeł, a pierwszym źródłem, które pasuje do preferencji jest jeden używany:
Przykład
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture> Spróbuj sam " srcset atrybut jest wymagane, i określa źródło obrazu.
media atrybut jest opcjonalny i akceptuje zapytań multimedialnych można znaleźć w regule CSS @media .
Należy również zdefiniować <img> elementu dla przeglądarek, które nie obsługują <picture> element.