Vue.js 图像纵横比

Posted 2023-02-22

【中文标题】Vue.js 图像纵横比

【英文标题】：Vue.js Image Aspect Ratio

【发布时间】：2018-10-25 06:44:47

【问题描述】：

我正在创建我的新社交网络。我遇到了新问题，或者我想不出一种方法来实现我所拥有的解决方案。当用户上传图像时，我希望有保持图像纵横比的框，但也要保持相同的宽度。我想使用带有填充的 CSS 技巧，但我不知道如何动态计算纵横比并将其附加到元素的样式。

【参考方案1】：

不确定我是否 100% 遵循，但如果您希望图像具有设定宽度而高度基于其纵横比的图像。只需使用 CSS 设置图像宽度并将高度设置为自动。

如果你想将它包装在一个盒子（div）中，你可以设置盒子的宽度并将图像设置为 100%

【参考方案2】：

您可以使用v-aspect-ratio 指令。