HTML 5 adaptacyjny obraz ekranu proporcjonalnego skalowania obrazu dla strony internetowej HTML XNUMX

Ze względu na dynamicznie rozwijający się Internet mobilny,Marketing WeChatPopularność telefonów komórkowych stała sięŻycieniezbędne narzędzie.

zbudować stronę internetowąszablon, zaleca się użycieWordPressMotyw adaptacyjny dla:

Co oznacza adaptacja obrazu CSS?

Adaptacja obrazu CSS oznacza tworzenie obrazów na stronie internetowej html za pomocą kodu CSS:

Kolejny,Chen WeiliangPodzielę się z wami kodem skalowania proporcjonalnego CSS img ^_^

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 ▼

Jaka jest różnica między klasą selektora CSS a id? użycie identyfikatora i klasy w HTML

Jaka jest różnica między klasą selektora CSS a id? Wykorzystanie identyfikatora i klasy w HTML Chen Weiliang obecnie zajmuje się SEO i optymalizacją motywu WordPress na stronie.Chociaż nauczyłem się już trochę podstawowej wiedzy o HTML i CSS, ale nie używałem tego od dłuższego czasu, zwłaszcza części CSS...

W jaki sposób witryna mobilna odtwarza wideo MP4 dostosowujące się do strony?Kliknij poniższy link ▼

W jaki sposób strona H5 MP4 dostosowuje się do strony?Strona mobilna odtwarza kod html wideo

Marketing wideo jest integralną częścią marketingu internetowego: wielu praktyków zajmujących się promocją online często wykorzystuje wideo w połączeniu z „marketingiem wirusowym” w celu zwiększenia ruchu.Jeśli marketing WeChat zostanie połączony z marketingiem wideo, może to jeszcze bardziej poprawić współczynnik konwersji copywritingu w nowych mediach i social e-commerce.Mam dużo przyjaciół...