Imenik članaka
Zbog procvata mobilnog interneta,WeChat MarketingPopularnost mobilnih telefona je postalaživotalat koji morate imati.
izraditi web stranicupredloška, preporučuje se korištenjeWordPressPrilagodljiva tema za:
- Ako programer teme WordPress nije dobro napravio HTML 5 ekran za prilagođavanje slike prilikom dizajniranja stranice teme WordPress...
- Pregledavajući web stranicu na mobilnom uređaju, doći će do vrlo ružnog dislociranja slike, a korisničko iskustvo je izuzetno loše!
Što znači adaptivna CSS slika?
Samoprilagodba CSS slike odnosi se na izradu slika u html web stranici, putem CSS koda:
- Automatski se prilagođava širini i visini različitih uređaja.
- Img oznaka automatski se proporcionalno skalira.
Sljedeći,Chen WeiliangPodijelit ću s vama CSS img proporcionalni kod za skaliranje ^_^
CSS prilagodljivi kod za visinu i širinu slike
Umetni sliku u html:
Ako želite da se slika prilagodi maloj veličini zaslona umjesto da ostane fiksna po širini i visini.
Sljedeći kod možete dodati u datoteku style.css svoje WordPress teme ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }izjava ovdjemax-widthpravilo maksimalne širine
- kako bi se osiguralo da su sve slike prikazane maksimalno 100% (tj. mogu se prikazati samo onoliko koliko su velike njihove vlastite slike).
- U ovom trenutku, ako je element koji sadrži sliku (na primjer, tijelo ili div koji sadrži sliku) manji od inherentne širine slike, slika će se skalirati kako bi ispunila maksimalni raspoloživi prostor.
width:auto;znači automatsku širinu
\9 To je način pisanja hack css-a.
- Na ovaj način, "\9" se dodaje normalnom css kodu, samo IE preglednik to može prepoznati, drugi preglednici će ignorirati ovu izjavu.
- Time će se postići diferencijacija preglednika, omogućavajući namjenu kompatibilnih preglednika.
Zašto ne koristiti širinu: 100%?
Da biste postigli automatsko skaliranje slika, također možete koristiti češće korištena svojstva širine, npr.width：100％.
Međutim, ovo pravilo ovdje ne vrijedi.
- Zato što će ovo pravilo učiniti da se čini širokim koliko i njegov spremnik.
- U slučajevima kada je spremnik mnogo širi od slike, slika će se nepotrebno rastegnuti.
注意 事项
Što su CSS selektori? Koja je razlika između klase i id-a?Sljedeći vodiči govore o ▼
Kako mobilna web stranica reproducira MP4 video prilagođen stranici?Kliknite na poveznicu ispod ▼
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) podijelio je "Web stranica HTML 5 image adaptive screen img proporcionalni kod za skaliranje", koji vam je od pomoći.
Dobrodošli da podijelite vezu ovog članka:https://www.chenweiliang.com/cwl-964.html