search

TwicPics / components

A Web component library that brings the power of TwicPics to your favorite web framework.
MIT License
53 stars 2 forks source link

<TwicImg /> default ratio of 1 #83

Closed chrispcode closed 9 months ago

chrispcode commented 9 months ago

Why is the default ratio 1, shouldn't it be the ratio of the image i am requesting?

chrispcode commented 9 months ago

Also is it possible to just give us a simple height or width property?

mbgspcii commented 9 months ago

Hi @chrispcode

Thank you for your questions.

The default ratio avoids CLS as we don't know the intrinsic dimensions of the image a priori.

If you know the image's intrinsic dimensions when you create your template, you can set the ratio property to (intrinsic width) / (intrinsic height). For example ratio = 2080/1386

TwicPics components don't expose width and height properties: they adapt to the dimensions of their container.

That said, you can use ratio="none" and regain total control of the display:

Here's a little example in react that might help.

If you'd like to find out more about the layout driven pattern adopted by TwicPics components, here's a link to an article describing in greater depth how it works.

Please note that using ratio="none"means you must define a height for your image (or video) (see the examples in the short demo).

Hoping it helps.