The title is rewritten as: Vuetify's v-img automatically adjusts according to the container size, not according to the src size

Question

Vuetify’s documentation about v-img is as follows:

v-img will automatically resize itself based on the size of its src, maintaining the correct aspect ratio. You can limit the size using the height and max-height properties.

However, it will automatically resize itself based on the size of the container or the size of max-height, whichever is smaller. It does not resize itself based on the size of the source file - in the example below, the image's src size is 256x256.

Example: https://codepen.io/nullism/pen/bGWVreK

Is this a bug in Veutify, or is there a problem with the documentation, or am I missing a property?

Thank you very much for your help!

Update: It looks like the normal tag works as expected: https://codepen.io/nullism/pen /OJmyjvw

Answer 1

As far as I understand, you want the size of the image to be less than 256 x 256, then you can add the attribute max-width="256" max-heigth="256"

<d id="app">
  <v-app id="inspire">
    <v-main>
      <v-container>
        <v-card>
          <v-card-text>
            <v-img max-width="256" max-heigth="256"
              src="https://www.redditstatic.com/icon.png"
            ></v-img>
          </v-card-text>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</div>