Blok: Billede
Velkommen til billedjustering! Hvis du genkender dette indlæg, det er fordi disse er blokke, der er konverteret fra klassikeren Markup: Billedjustering stolpe. Den bedste måde at demonstrere ebbe og flow på de forskellige billedpositioneringsmuligheder er at sætte dem tæt på et hav af ord. Grib en padle, og lad os komme i gang. Sørg for at prøve det i RTL-tilstand. Venstre skal forblive til venstre og højre skal forblive til højre for begge læsningsretninger.
Om emnet tilpasning, det skal bemærkes, at brugerne kan vælge mellem indstillingerne for Ingen, Venstre, Ret, og Centrum. Hvis temaet har tilføjet støtte til juster bredt, billeder kan også være bred og fuld bredde. Sørg for at teste denne side i RTL-tilstand.
Ud over, de får også mulighederne for billeddimensionerne 25%, 50%, 75%, 100% eller en indstillet bredde og højde.
Billedet ovenfor tilfældigvis er centreret.
Resten af dette afsnit er fyldstof for at se teksten vikle sig omkring 150×150 billede, som er venstrejusteret.
Som du kan se, skal der være plads ovenfor, under, og til højre for billedet. Teksten bør ikke krybe ind i billedet. Krybning er bare ikke rigtigt. Billeder har også brug for vejrtrækning. Lad dem tale som dine ord. Lad dem udføre deres job uden besvær fra teksten. Omkring endnu en sætning her, vi ser, at teksten bevæger sig fra højre for billedet ned under billedet i problemfri overgang. Igen, lade det gøre det thang. Mission fuldført!
Og nu for en massivt stort billede. Det har også ingen justering.
Billedet ovenfor, dog 1200px bredt, bør ikke overløbe indholdsområdet. Det skal forblive indeholdt uden synlig forstyrrelse af strømmen af indhold.
Og nu vil vi flytte tingene til højre justering. Igen, der skal være masser af plads over, under, og til venstre for billedet. Se bare på ham der ... Hej fyr! Måde at rocke den højre side. Jeg er ligeglad med, hvad det venstrejusterede billede siger, du ser godt ud. Lad ikke andre fortælle dig anderledes.
Bare lidt her, du skulle se teksten begynde at pakke under det højrejusterede billede og slå sig godt ind. Der skal stadig være masser af plads, og alt skal sidde smukt. Ja ... Lige sådan. Det føltes aldrig så godt at have ret.
Og lige da du troede, vi var færdige, vi gør dem igen med billedtekster!
Billedet ovenfor tilfældigvis er centreret. Billedteksten har også et link i sig, bare for at se om det gør noget funky.
Resten af dette afsnit er fyldstof for at se teksten vikle sig omkring 150×150 billede, som er venstrejusteret.
Som du kan se, skal der være plads ovenfor, under, og til højre for billedet. Teksten bør ikke krybe ind i billedet. Krybning er bare ikke rigtigt. Billeder har også brug for vejrtrækning. Lad dem tale som dine ord. Lad dem udføre deres job uden besvær fra teksten. Omkring endnu en sætning her, vi ser, at teksten bevæger sig fra højre for billedet ned under billedet i problemfri overgang. Igen, lade det gøre det thang. Mission fuldført!
Og nu for en massivt stort billede. Det har også ingen justering.
Billedet ovenfor, dog 1200px bredt, bør ikke overløbe indholdsområdet. Det skal forblive indeholdt uden synlig forstyrrelse af strømmen af indhold.
Og nu vil vi flytte tingene til højre justering. Igen, der skal være masser af plads over, under, og til venstre for billedet. Se bare på ham der ... Hej fyr! Måde at rocke den højre side. Jeg er ligeglad med, hvad det venstrejusterede billede siger, du ser godt ud. Lad ikke andre fortælle dig anderledes.
Bare lidt her, du skulle se teksten begynde at pakke under det højrejusterede billede og slå sig godt ind. Der skal stadig være masser af plads, og alt skal sidde smukt. Ja ... Lige sådan. Det føltes aldrig så godt at have ret.
Forestil dig, at vi finder et brug for det ekstra brede billede! Dette billede har bred bredde justering:
Kan vi gå større? Dette billede har fuld bredde justering:
Og det er en wrap, jeg! Du overlevede det tumultende farvande ved tilpasningen. Billedjusteringspræstation ulåst! En sidste ting: Det sidste element i indholdet af dette indlæg er en miniaturebillede, der flyder til højre. Sørg for, at elementerne efter indholdet ryddes korrekt.