Why is Q-Img height being ignored, yet width works?

[ma2i]

So I’m trying to display a q-img and tell it to use a height of 100px; I’ve tried setting it directly, setting it using “style”,tried using “img-style” tried setting max-height instead of height, etc, the actual component keeps having a height of 0px.

However, when I set width… works as expected, sets the width of the image to what I asked for.

Vue DevTools shows that height does end up being set to 100px as expected.

Trying to port a website that uses height for it’s definitions everywhere… would be nice to not have to calculate the width for every image

Is this a bug? Using the latest version of quasar as of a couple days ago.

See my code:

<template>
  <q-page padding>
    <!-- content -->
    <div class="fixed-center">
      <q-img src="~assets/images/logo-together.png" height="100px"/> <!-- style="height:100px;"/-->
    </div>
  </q-page>
</template>

[dobbel]

@ma2i said in Why is Q-Img height being ignored, yet width works?:

class=“fixed-center”

remove class='fixed-center'

https://codepen.io/ontwikkelfabriek/pen/jOrvrVZ

[ma2i]

Good catch, thanks dobbel!

hmm… so how can I center a container that includes an image, plus a few other things I didn’t include in that example.

[dobbel]

@ma2i

You can use flex box:

flex box column mode
https://codepen.io/ontwikkelfabriek/pen/BazOryL

flex box row mode
https://codepen.io/ontwikkelfabriek/pen/jOrvzNw

css
https://codepen.io/ontwikkelfabriek/pen/jOrvrVZ