Blok: Beeld

November 3, 2018 Geen reacties Adam_Goodman Categorieën BlokTags ,

Welkom bij beelduitlijning! Als je dit bericht herkent, het is omdat dit blokken zijn die zijn geconverteerd van de klassieker Markup: Afbeelding uitlijnen post. De beste manier om de eb en vloed van de verschillende opties voor beeldpositionering te demonstreren, is door ze lekker te nestelen tussen een oceaan van woorden. Pak een peddel en laten we aan de slag gaan. Probeer het zeker in RTL-modus. Links moet links blijven en rechts moet rechts blijven voor beide leesrichtingen.

Over het onderwerp uitlijning, Opgemerkt moet worden dat gebruikers kunnen kiezen uit de opties van Geen, Links, Rechtsaf, en Centrum. Als het thema ondersteuning heeft toegevoegd voor breed uitlijnen, afbeeldingen kunnen ook zijn breed en volle breedte. Test deze pagina in RTL-modus.

In aanvulling, ze krijgen ook de opties van de afbeeldingsafmetingen 25%, 50%, 75%, 100% of een vaste breedte en hoogte.

Afbeelding uitlijnen 580x300

De afbeelding hierboven is toevallig gecentreerd.

Afbeelding uitlijnen 150x150

De rest van deze paragraaf is opvulling om de tekst rond de 150 te zien lopen×150 beeld, dat is Links uitgelijnd.

Zoals je kunt zien, moet er wat ruimte boven zijn, hieronder, en aan de rechterkant van de afbeelding. De tekst mag niet over de afbeelding kruipen. Kruipen is gewoon niet goed. Afbeeldingen hebben ook ademruimte nodig. Laat ze spreken zoals jij woorden. Laat ze hun werk doen zonder gedoe met de tekst. In ongeveer nog een zin hier, we zullen zien dat de tekst van de rechterkant van de afbeelding naar beneden beweegt in een naadloze overgang onder de afbeelding. Opnieuw, het laten doen is thang. Missie volbracht!

En nu voor een enorm grote afbeelding. Het heeft ook geen uitlijning.

Beelduitlijning 1200x400

De afbeelding hierboven, hoewel 1200px breed, mag het inhoudsgebied niet overstromen. Het moet ingesloten blijven zonder zichtbare verstoring van de inhoudsstroom.

Afbeelding uitlijnen 300x200

En nu gaan we dingen verschuiven naar de rechts uitlijnen. Opnieuw, er moet boven voldoende ruimte zijn, hieronder, en aan de linkerkant van de afbeelding. Kijk hem daar maar eens aan ... Hey man! Manier om die rechterkant te rocken. Het kan me niet schelen wat de links uitgelijnde afbeelding zegt, je ziet er goed uit. Laat niemand anders je iets anders vertellen.

Even hier, je zou moeten zien dat de tekst begint te lopen onder de rechts uitgelijnde afbeelding en mooi tot rust komt. Er moet nog steeds voldoende ruimte zijn en alles moet mooi zitten. Ja ... zomaar. Het voelde nog nooit zo goed om gelijk te hebben.

En net toen je dacht dat we klaar waren, we gaan ze allemaal opnieuw doen met bijschriften!

Afbeelding uitlijnen 580x300
Kijk naar 580×300 wat halen onderschrift liefde.

De afbeelding hierboven is toevallig gecentreerd. Het bijschrift bevat ook een link, gewoon om te zien of het iets funky doet.

Afbeelding uitlijnen 150x150
Itty-bitty bijschrift.

De rest van deze paragraaf is opvulling om de tekst rond de 150 te zien lopen×150 beeld, dat is Links uitgelijnd.

Zoals je kunt zien, moet er wat ruimte boven zijn, hieronder, en aan de rechterkant van de afbeelding. De tekst mag niet over de afbeelding kruipen. Kruipen is gewoon niet goed. Afbeeldingen hebben ook ademruimte nodig. Laat ze spreken zoals jij woorden. Laat ze hun werk doen zonder gedoe met de tekst. In ongeveer nog een zin hier, we zullen zien dat de tekst van de rechterkant van de afbeelding naar beneden beweegt in een naadloze overgang onder de afbeelding. Opnieuw, het laten doen is thang. Missie volbracht!

En nu voor een enorm grote afbeelding. Het heeft ook geen uitlijning.

Beelduitlijning 1200x400
Enorme afbeeldingcommentaar voor je oogbollen.

De afbeelding hierboven, hoewel 1200px breed, mag het inhoudsgebied niet overstromen. Het moet ingesloten blijven zonder zichtbare verstoring van de inhoudsstroom.

Afbeelding uitlijnen 300x200
Het voelt goed om altijd gelijk te hebben.

En nu gaan we dingen verschuiven naar de rechts uitlijnen. Opnieuw, er moet boven voldoende ruimte zijn, hieronder, en aan de linkerkant van de afbeelding. Kijk hem daar maar eens aan ... Hey man! Manier om die rechterkant te rocken. Het kan me niet schelen wat de links uitgelijnde afbeelding zegt, je ziet er goed uit. Laat niemand anders je iets anders vertellen.

Even hier, je zou moeten zien dat de tekst begint te lopen onder de rechts uitgelijnde afbeelding en mooi tot rust komt. Er moet nog steeds voldoende ruimte zijn en alles moet mooi zitten. Ja ... zomaar. Het voelde nog nooit zo goed om gelijk te hebben.

Stel je voor dat we een toepassing zouden vinden voor de extra brede afbeelding! Deze afbeelding heeft de wijde breedte uitlijning:

Beelduitlijning 1200x4002

Kunnen we groter worden? Deze afbeelding heeft de volle breedte uitlijning:

Beelduitlijning 1200x4002

Klaar is kees, ik! Je hebt de tumultueuze wateren van afstemming overleefd. Prestatie van beelduitlijning ontgrendeld! Nog een ding: Het laatste item in de inhoud van dit bericht is een miniatuur die naar rechts zweeft. Zorg ervoor dat alle elementen na de inhoud correct worden gewist.