Katalog artykułów
Dzięki dynamicznemu rozwojowi Internetu mobilnego i upowszechnieniu się marketingu WeChat , telefony komórkowe stały się niezbędnym narzędziem w życiu .
W przypadku szablonów stron internetowych zalecamy korzystanie z responsywnych motywów WordPress :
- Jeśli twórca motywu WordPress nie stworzył dobrze ekranu adaptacyjnego obrazu HTML 5 podczas projektowania strony motywu WordPress...
- Podczas przeglądania strony internetowej na urządzeniu mobilnym wystąpi bardzo brzydka niewspółosiowość obrazu, a wrażenia użytkownika są wyjątkowo słabe!
Co oznacza adaptacja obrazu CSS?
Adaptacja obrazu CSS oznacza tworzenie obrazów na stronie internetowej html za pomocą kodu CSS:
- Automatycznie dostosowuj się do szerokości i wysokości różnych urządzeń.
- Tag img jest automatycznie proporcjonalnie skalowany.
Następnie Chen Weiliang pokaże Ci kod CSS umożliwiający proporcjonalne skalowanie rozmiaru obrazu. ^_^
Kod dostosowujący wysokość i szerokość obrazu CSS
Wstaw obraz w html:
Jeśli chcesz, aby obraz dostosowywał się do małego rozmiaru ekranu, zamiast pozostawać na stałym poziomie szerokości i wysokości.
Możesz dodać następujący kod do pliku style.css swojego motywu WordPress ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }oświadczenie tutajmax-widthzasada maksymalnej szerokości
- aby upewnić się, że wszystkie obrazy są wyświetlane w maksymalnie 100% (tj. mogą być wyświetlane tylko tak duże, jak ich własne obrazy).
- W tym momencie, jeśli element zawierający obraz (na przykład korpus lub element div zawierający obraz) jest mniejszy niż właściwa szerokość obrazu, obraz zostanie przeskalowany, aby wypełnić maksymalną dostępną przestrzeń.
width:auto;oznacza automatyczną szerokość
\9 Jest to sposób na pisanie hacka css.
- W ten sposób "\9" jest dodawany do normalnego kodu css, tylko przeglądarka IE może go rozpoznać, inne przeglądarki zignorują to stwierdzenie.
- Pozwoli to na zróżnicowanie przeglądarek, umożliwiając zastosowanie kompatybilnych przeglądarek.
Dlaczego nie użyć szerokości: 100%?
Aby uzyskać automatyczne skalowanie obrazów, możesz również użyć częściej używanych właściwości szerokości, np.width：100％.
Jednak ta zasada nie ma tutaj zastosowania.
- Ponieważ ta reguła sprawi, że będzie wyglądał tak szeroko, jak jego pojemnik.
- W przypadkach, gdy kontener jest znacznie szerszy niż obraz, obraz zostanie niepotrzebnie rozciągnięty.
注意 事项
Czym są selektory CSS? Jaka jest różnica między klasą a identyfikatorem?Poniższe tutoriale mówią o ▼
W jaki sposób witryna mobilna odtwarza wideo MP4 dostosowujące się do strony?Kliknij poniższy link ▼
Mamy nadzieję, że artykuł „Kod zmiany rozmiaru obrazów HTML 5 w celu dostosowania ich do rozmiaru ekranu i proporcjonalnego rozmiaru stron internetowych” udostępniony na blogu Chen Weilianga ( https://www.chenweiliang.com/ ) okaże się dla Ciebie pomocny.
Możesz udostępnić link do tego artykułu: https://www.chenweiliang.com/cwl-964.html