Responsive Web Design - zdjęcie
Użyj atrybutu width
Jeżeli cecha szerokość jest ustawiona na 100%, obraz może być realizowane zgodnie z górnego i dolnego zakresu funkcji reagujących:
Należy zauważyć, że w powyższym przykładzie obraz będzie większa niż jej oryginalnego obrazu. Możemy użyć max-width przypisują dobre rozwiązanie tego problemu.
Korzystanie max-width właściwość
Jeśli właściwość max szerokość jest ustawiona na 100%, obraz nie będzie większa niż w oryginalnym rozmiarze:
Dodaj strony obrazu
Tło obrazu
Tło obrazu może odpowiedzieć na rozmiar lub powiększenia.
Poniżej przedstawiono trzy różne sposoby:
1. Jeśli właściwość background-size jest ustawiony na "zawiera", obraz tła będzie adaptacyjne stosunek powierzchni treść. Zdjęcia utrzymania jej proporcje na niezmienionym poziomie:
Jest to kod CSS:
Przykłady
width: 100%;
height: 400px;
background-image: url ( 'img_flowers.jpg ');
background-repeat: no-repeat;
background-size: zawierają;
border: 1px solid red;
}
Spróbuj »
2. Jeśli właściwość background-size jest ustawiony na "100% 100%", obraz w tle zostanie rozszerzony na cały region:
Przykłady
Jest to kod CSS:
width: 100%;
height: 400px;
background-image: url ( 'img_flowers.jpg ');
background-size: 100% 100% ;
border: 1px solid red;
}
Spróbuj »
3. Jeśli właściwość background-size jest ustawiony na "pokrycie", obraz w tle jest rozszerzona być na tyle duża, aby całkowicie pokryć tle, tak że obszar obrazu tła. Zauważ, że nieruchomość pozostaje proporcje obrazu, więc niektóre części obrazu tła nie mogą być wyświetlane w obszarze pozycjonowania tła.
Jest to kod CSS:
Przykłady
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Spróbuj »
Różne urządzenia pokazują inny obraz
nie dobrze pokazać na małym ekranie Duże zdjęcia mogą być wyświetlane na dużym ekranie, ale. Nie trzeba ładować się na małym ekranie w dużym obrazie, a więc ma wpływ na szybkość ładowania. Więc możemy użyć zapytania mediów, w zależności od urządzenia, aby wyświetlić inny obraz.
Poniższy duże zdjęcie i małe zdjęcie będzie wyświetlane na różnych urządzeniach:
Przykłady
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 »
Można użyć zapytania mediów min-device-width substytutem min-width atrybutu wykryje on szerokość urządzenia zamiast szerokość przeglądarki. Zresetować rozmiary przeglądarki, rozmiar obrazu nie zmienia się.
Przykłady
body {
background-image: url ( 'img_smallflower.jpg ');
}
/ * Urządzenie większy niż 400px (także równe): * /
@media tylko ekran i (min-device -width: 400px) {
body {
background-image: url ( 'img_flowers.jpg ');
}
}
Spróbuj »
HTML5 <obraz> Element
HTML5 jest <picture> Element można ustawić wiele obrazów.
Pomoc Browser
| element | |||||
|---|---|---|---|---|---|
| <Obraz> | Nie obsługuje | 38,0 | 38,0 | Nie obsługuje | 25,0 |
<picture> Element podobny do <video> i <audio> elementy. Różne urządzenia mogą być źródłem środków, pierwszy zestaw korzystnego zastosowania:
Przykłady
<source srcset = "img_smallflower.jpg" media = "(max-width: 400px)">
<Źródło srcset = "img_flowers.jpg">
<Img src = "img_flowers.jpg" alt = "Kwiaty">
</ Obraz>
Spróbuj »
srcset nieruchomość musi być definicja zasobu obrazu.
media atrybut jest opcjonalny, w mediach odpytuje CSS @media wyklucza zobaczyć szczegóły.
Nie wspieraj <picture> elementy przeglądarki można zdefiniować <img> elementu zamiast.