Styling elements nested within div's, in particular images

[johnperry-math]

Question

Hallo

I was evaluating nice-gui for a project and I rather like it 🤩, but I encountered a showstopper when it came to the image types:

• Images are nested within two div's. For example, the following Python code:

  ui.image("Dont_Tell_Me.jpg") \
      .props("id=img_div content-style='object-fit: none;'") \
      .style("width: 100vw;")

  ...produces the following HTML.

  <div class="q-img q-img--menu" style="width: 100vw;" role="img" id="img_div" content-style="object-fit: none;">
      <div style="padding-bottom: 127.119%;"></div>
      <div class="q-img__container absolute-full">
          <img class="q-img__image q-img__image--with-transition q-img__image--loaded" style="object-fit: cover; object-position: 50% 50%;" loading="lazy" fetchpriority="auto" aria-hidden="true" draggable="false" src="/_nicegui/auto/static/255fa2fa9ad7a099040b1818a950c0f2/Dont_Tell_Me.jpg">
      </div>
      <div class="q-img__content absolute-full q-anchor--skip"></div>
  </div>
  ```html

• Any props / attrs passed to the image are actually assigned to the outermost div. Note, in particular, where the id, the content-style attr, and the style prop ended up. 😢

• It thus seems impossible to change props / attrs that make sense only on image types, most pressingly for this case, object-fit and object-position.

Does this sound right? Does it need additional elaboration? I have attached a most excellent image that should make the MWE work (once it's given the appropriate name and the Python is given the appropriate boilerplate).

Thanks for any insight!

[falkoschindler]

Hi @johnperry-math,

Yes, the ui.image element (based on Quasar's QImg) is a bit tricky to configure. It is buried in divs - I guess to add elements like spinners and captions.

To add classes and style to the <img> tag itself, you can use the props "img-class" and "img-style". For specifying position and fit, there are "position" and "fit" props. See https://quasar.dev/vue-components/img#qimg-api > Props > Style for a complete list of available props.