Variant
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.
Size
Aspect ratio
Assing padding-bottom on .xt-media-container to the aspect ratio you desire.
Height
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).
Width
If you want to assign width assign it to a parent node of .xt-media-container.
Relative
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.