0

I cannot seem to get this working in Vuetify. I have a default Nuxt JS project with Vuetify installed. But I do think this problem is framework agnostic. I cannot seem to get it to show as I want to in the image bellow.

I want simple to have the div be a bit larger then the image. I have added some padding using p-5. But when I for instance change the w-auto to `w-100' then the div tries to take on the full width of its parent.

    <div class="d-flex flex-column align-center w-100">
      <div class="background-primary w-auto p-5 elevation-10 rounded-md">
        <v-img
          :src="paintingUrl"
          alt="Painting"
          aspect-ratio="1.5"
          max-height="30rem"
          contain
        />
      </div>
    </div>

enter image description here

Improve this question
1
  • Maybe you could get the same effect using border and not padding. Commented Apr 14 at 8:05
Related questions
2533
How can I make a div not larger than its contents?
1749
How to vertically align an image inside a div
1688
How can I vertically center a div element for all browsers using CSS?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.