I want to define the top attribute of v-img based on the current breakpoint of the window.

I want to define it like this:

The calculated properties are as follows:

logoTop(){ switch (this.$vuetify.breakpoint.name) { case 'xl': return "-4%" case 'lg': return "-6%" case 'md': return "-8%" case 'sm': return "-8%" case 'xs': return 0 default: return "-4%" } },

The CSS is as follows:

#logo-transparent{ z-index: 1; width: 400px; height: 300px; position: absolute; right: -1%; }

But the problem is that v-img does not have a top attribute.

I want to use computed properties to define the CSS of an image like this:

logoTop(){ return { "--top-property" : switch (this.$vuetify.breakpoint.name) { case 'xl': return 400 case 'lg': return 300 case 'md': return 300 case 'sm': return 200 case 'xs': return 0 default: return 400 } } },

Use it in CSS as follows:

top : var(--top-property) 

But it seems I can't use switch in this case.

What should I do?