When images are loading the .xt-media-container background is shown.

Use Tailwind CSS to assign variant (e.g. background-color).

You can also animate background and add additional content inside background to create a skeleton when image is loading. This demo shows skeleton loading with jpg images with custom logo and animated gradient as background-image.

Use sparingly this skeleton because if you put this animation on many images the cpu load gets high.

Object fit

Use Tailwind CSS to assign object fit. (e.g. object-position).

You can also use video or iframe for media.


Aspect ratio

Assing padding-bottom on .xt-media-container to the aspect ratio you desire.


Assing height on .xt-media-container to assign the height you desire.

Min Height

Additionally with height or padding-bottom you can add a min-height: <Value> to have a min height (use narrow screen to see it in action).


If you want to assign width assign it to a parent node of .xt-media-container.


Or use Tailwind CSS .relative on .xt-media to assign relative position. The result is a responsive media.

The result is the same as putting width on the asset.