标题重写为:Vuetify的v-img根据容器大小自动调整,而非根据src大小调整
P粉511896716
P粉511896716 2023-08-25 11:52:29
0
1
609
<p>Vuetify关于<code>v-img</code>的文档如下:</p> <blockquote> <p>v-img会自动根据其src的大小调整自己的大小,保持正确的宽高比。您可以使用height和max-height属性来限制大小。</p> </blockquote> <p>然而,它会根据容器的大小或<code>max-height</code>的大小自动调整自己的大小,以较小的那个为准。它不会根据源文件的大小来调整自己的大小 —— 在下面的示例中,图像的src大小为256x256。</p> <p>示例: https://codepen.io/nullism/pen/bGWVreK</p> <p>这是Veutify的一个错误吗,还是文档有问题,还是我遗漏了某个属性?</p> <p>非常感谢您的帮助!</p> <p><strong>更新</strong>:看起来普通的<code><img/></code>标签按预期工作:https://codepen.io/nullism/pen/OJmyjvw</p>
P粉511896716
P粉511896716

全部回复(1)
P粉790819727

据我理解,您希望图像的大小小于256 x 256,那么可以添加属性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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板