image in header always has width 100% , instead of auto (responsive)

[mariusa]

Hi!

I've been trying to make an image in header be responsive, but with a max height:

 <template #header>
                <img
                    v-if="!sidebarCollapsed"
                    src="/assets/logo.png"
                    class="d-block org-logo"
                >
                <img
                    v-if="sidebarCollapsed"
                    src="/assets/favicon.png"
                    class="d-block org-logo"
                >
            </template>

.org-logo {
    width: auto;
    max-height: 24px;
}

width is always 100%. THe image works fine when placed outside sidebar-menu, it's something in sidebar-menu styles which affect this.

Besides forcing a specific width & height in pixels, is there any solution to make images behave normally? Thanks!

[mariusa]

FYI Forcing width does work

.org-logo {
    // width: auto;
    // max-height: 44px;
    width: 80%;
    height: auto;
    margin: auto;
}

[yaminncco]

What about

.org-logo {
  width: auto;
  max-height: 44px;
  margin: auto;
}

or maybe wrap the image in a div

[mariusa]

wrapping in a div did solve it. Thank you!