How to scale-down images?

[TutorExilius]

Hello!

Based on the slideshow example: https://github.com/zauberzeug/nicegui/blob/main/examples/slideshow/main.py
I try to scale the images down, but I just can't get it to work :/ ...

The code below does not result to that what I expect:
slide = ui.image(source=f"slides/{files[index]}").classes(add="object-scale-down")

In HTML the adding class 'object-scale-down' lands in the div element above it, not in my Element.

Is it possible that nicegui is not correctly packing the defined tailwind classes into the correct element?

[falkoschindler]

Let's start with a simple example:

ui.image('http://placeimg.com/640/360/tech')

This shows a 640x360 image and automatically scales it up to fill the screen. Note that internally NiceGUI is using Quasar's QImg instead of a plain HTML image. Adding the class object-scale-down does not work because of two reasons:

1. As you noticed, the class is applied to the outermost div of the QImg element, not the img tag itself.
2. Since the size of the container is basically unlimited, the effect of the specific object-fit value "object-scale-down" is not really visible.

Instead, you can use Quasar's QImg props to specify the fit mode:

ui.image('http://placeimg.com/640/360/tech').props('fit=scale-down')

This should do the trick. To show the effect more clearly, let's specify a fixed size and some background color:

ui.image('http://placeimg.com/640/360/tech').props('fit=scale-down').classes('w-80 h-80 bg-blue-100')

[TutorExilius]

Wow. thank you, I will try.

Is there an option to deactivate Tailwind completely? Without knowing Tailwind (and Quasar), it is hard too use NiceGUI.

An option where you can deactivate Tailwind would be nice (it must be possible to give all elements an custom id/class name programatically, so I can address them by css).

[falkoschindler]

Currently there is no way to deactivate Tailwind. But it should be rather simple to implement, so I created issue #231 for implementing this feature.

Whether Tailwind is active or not, you can always use your own classes with custom style definitions. NiceGUI does not care about what you pass to the .classes() method as long it consists of a number of words separated by whitespace. The ID is assigned automatically for every element. You can read it via element.id. But using classes for styling instead of IDs is best practice anyway.

Quasar is a bit harder to get rid of. We tried to make NiceGUI accessible even for non-web developers. Therefore we make use of Quasar elements with a nicer look and feel than plain HTML. If you - for whatever reason - don't like, e.g., ui.image using QImg, you can always create a plain HTML element yourself using the generic Element class with a tag name as single argument:

from nicegui.element import Element

Element('img') \
    .props('src=http://placeimg.com/640/360/tech') \
    .style('width: 200px; height: 200px; border: 1pt solid gray; object-fit:scale-down')