Najlepszy samouczek Responsive Web Design - zdjęcie W 2024 r. W tym samouczku możesz dowiedzieć się Użyj atrybutu width,Przykłady,Korzystanie max-width właściwość,Przykłady,Dodaj strony obrazu,Przykłady,Tło obrazu,Przykłady,Przykłady,Przykłady,Różne urządzenia pokazują inny obraz,Przykłady,Przykłady,HTML5 <obraz> Element,Przykłady,
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.
Jeśli właściwość max szerokość jest ustawiona na 100%, obraz nie będzie większa niż w oryginalnym rozmiarze:
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:
2. Jeśli właściwość background-size jest ustawiony na "100% 100%", obraz w tle zostanie rozszerzony na cały region:
Jest to kod CSS:
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:
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:
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ę.
HTML5 jest <picture>
Element można ustawić wiele obrazów.
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:
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.