Dynamic width and Fixed width in using q-card and q-img

[cinus]

Hi

I want to make horizontal image slider with q-img.

I succeed making image slider with fixed width(200px) and ratio(1), and it works well,

but in fixed height(ex: 200px), q-img(or q-card) cannot find width.

Here is my jsfiddle link. [https://jsfiddle.net/Cinus/q4soke1p/14/](link url)

How can I solve it? Help me please.

Thanks for read my question. (I cannot use English well)

Have a nice day!

[rab]

q-card is fitting to width of its content.
q-img is fitting its width to q-card (and height as ratio is 1)
In jsfiddle on line 44 change ‘cat{{idx}}’ to ‘wide-cat{{idx}}’ to see effect

To get full-height image add a class to q-img with height:100%
If you want square images why not set explicit width as well.

[cinus]

@rab Thanks for answer

I tried to set height to full, but the width of q-img is still derived from the width of text(cat{{idx}}).

I want to set the width to each image’s own ratio.

Here is the sample of i expected.

https://jsfiddle.net/Cinus/q4soke1p/18/

I want to replace <img> with <q-img> in the last line.

Is there a way to replace it?

[rab]

I can’t find a sensible solution using q-img.

[cinus]

@rab
That’s okay Thanks very much!