在 Vue 2 项目中，让图片在不同的布局尺寸下不易发生失真变形
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
- 首先，在模板中使用
<img>标签来呈现图片：
<template>
<div>
<img :src="imageUrl" alt="My Image" class="responsive-image">
</div>
</template> 2.接下来，在样式文件（例如，.vue 文件的 <style> 部分或独立的 .css 文件）中，为图片添加一个类（例如 responsive-image），并设置其样式：
.responsive-image {
width: 100%; /* 图片宽度占父元素的100% */
height: auto; /* 高度根据宽度自动调整 */
object-fit: contain; /* 控制图片在容器内缩放时的显示方式 */
}在上述代码中，我们使用了 object-fit: contain 来确保图片在容器内按比例缩放以适应其宽度，同时保持其原始高度。这样，不论容器的大小如何，图片都会适应并保持长宽比，避免失真和变形。
你可以根据具体需求调整 object-fit 的值，常见的选项包括：
fill：图片会被拉伸以填满容器，可能导致图片变形。contain：图片按比例缩放以适应容器，不会变形，但可能留有空白区域。cover：图片按比例缩放以填满容器，可能会裁剪超出容器范围的部分。none：图片按原始大小显示，可能会导致容器溢出。
根据你的需求选择适合的 object-fit 值，以保持图片在不同布局尺寸下的良好显示效果。
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)