Afbeeldingen en insluitingen
Responsieve afbeeldingen, video
Afbeeldingen
Responsieve beelden met automatische optimalisatie en interactieve zoomfunctionaliteit.
Als
@nuxt/image is geïnstalleerd, wordt de <NuxtImg>-component gebruikt in plaats van de native img-tag voor verbeterde prestaties en optimalisatie.Zoom
Afbeeldingen ondersteunen standaard interactieve zoom: door op een afbeelding te klikken, wordt deze geopend in een modale overlay met vloeiende overgangen, waardoor gebruikers details nader kunnen bekijken.
Voeg het kenmerk :zoom="false" toe om zoomen op een specifieke afbeelding te voorkomen.
{:zoom="false"}
Grootte
Afbeeldingen passen zich automatisch aan hun container aan met behoud van de beeldverhouding. U kunt de grootte regelen door middel van markdown of HTML-kenmerken wanneer dat nodig is.
{width="300"}
Iframes
Sluit eenvoudig interactieve inhoud in zoals CodeSandbox, Figma of YouTube.
YouTube
<iframe src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9; width: 100%;"></iframe>
CodeSandbox
<iframe src="https://codesandbox.io/p/devbox/nuxt-ui-xgrzw5" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9; width: 100%;"></iframe>
Figma
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; height: 450px;" src="https://embed.figma.com/file/1544369209862884086/hf_embed?community_viewer=true&embed_host=fastma&fuid=960610330589944894&kind=file&page-selector=0&viewer=1" allowfullscreen></iframe>