2.7 KiB

Czysty Wina Historia

Responsive Media

[component-header:sl-responsive-media]

Displays media in the desired aspect ratio.

You can slot in any replaced element, including <iframe>, <img>, and <video>. As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container. The default aspect ratio is 16:9.

<sl-responsive-media>
  <img
    src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
    alt="A train riding through autumn foliage with mountains in the distance."
  />
</sl-responsive-media>

import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlResponsiveMedia>
    <img
      src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
      alt="A train riding through autumn foliage with mountains in the distance."
    />
  </SlResponsiveMedia>
);

Examples

Responsive Images

The following image maintains a 4:3 aspect ratio as its container is resized.

<sl-responsive-media aspect-ratio="4:3">
  <img
    src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
    alt="Two blue chairs on a sandy beach."
  />
</sl-responsive-media>

import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlResponsiveMedia aspect-ratio="4:3">
    <img
      src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
      alt="Two blue chairs on a sandy beach."
    />
  </SlResponsiveMedia>
);

Responsive Videos

The following video is embedded using an iframe and maintains a 16:9 aspect ratio as its container is resized.

<sl-responsive-media aspect-ratio="16:9">
  <iframe
    src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0"
    frameborder="0"
    allow="autoplay; fullscreen"
    allowfullscreen
  ></iframe>
</sl-responsive-media>

import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlResponsiveMedia aspect-ratio="16:9">
    <iframe
      src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0"
      frameborder="0"
      allow="autoplay; fullscreen"
      allowfullscreen
    />
  </SlResponsiveMedia>
);

[component-metadata:sl-responsive-media]

2.7 KiB Czysty Wina Historia

Responsive Media

Examples

Responsive Images

Responsive Videos

2.7 KiB

Czysty Wina Historia