vue中动态绑定背景图, 图片水平垂直居中

最新推荐文章于 2025-07-06 08:00:00 发布

原创最新推荐文章于 2025-07-06 08:00:00 发布 · 5.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #动态绑定背景图 #水平垂直居中

vue 同时被 2 个专栏收录

44 篇文章

订阅专栏

css3

6 篇文章

订阅专栏

本文介绍在Vue中如何使用动态绑定实现不同尺寸图片在固定宽高的父元素中水平垂直居中显示的方法，通过设置背景图片、大小、重复及位置属性实现图片自适应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中动态绑定背景图，并且使宽高不等的图片水平垂直居中

外层父元素固定宽高，让图片垂直居中的方法

<div style="width:200px;height:200px;">
	<div :style="{backgroundImage: 'url(' + item.image + ')', backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center center'}"></div>
</div>

效果：
1.图片height>width
在这里插入图片描述
2.图片width>height

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

干了这碗小米汤儿

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp｜实现多端图片上传、拍照上传自定义插入水印内容及拖拽自定义水印位置,实现水印相机、图片下载保存等功能

商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml

05-28

1万+

本文以基础视角，详细讲解如何在uni-app中实现图片上传→水印动态编辑→图片下载的全流程功能。

Vue.js 实战：一步步实现炫酷的登录界面」「Vue.js 新手教程：用 Vue 创建美观的手机登录页面」「前端必学！用 Vue.js 打造登录界面」「如何用 Vue.js 实现手机验证码和一

南北极之间

11-07

671

在这篇教程中，我们将分步实现一个简单的登录页面，其中包含“本机号一键登录”和“其他方式登录”功能。通过本教程，你将掌握 Vue.js 的数据绑定、条件渲染、事件处理等基础知识。该项目实现了一个基础的登录页面，页面主要包含以下功能：在开始之前，确保你已经在本地环境中引入了 Vue.js。我们将使用 Vue.js 的 CDN 版本：项目结构与基础代码以下是 HTML 和 Vue 的基础代码结构。样式设计与布局为了实现美观的界面效果，我们使用了一些基础的 CSS 样式来控制布局和样式。使用了线性渐

参与评论您还未登录，请先登录后发表或查看评论

vue实现长图垂直居上 vue实现短图垂直居中

08-29

主要为大家详细介绍了vue弹性布局实现长图垂直居上，vue实现短图垂直居中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue实现图片自适应居中

zhao142731的博客

10-13

1万+

<template> <div id="app" :class="fls"> <div :class="aa1" v-for="(item,index) in srcs" :key="index"> <img :src="item" > </div> </div> </template> <script> export default { dat.

Vue 中 div 垂直居中方法

yonghuid123453的博客

07-06

317

本文介绍了6种CSS垂直居中方法：1）Flexbox布局推荐使用display:flex配合align-items和justify-content；2）Grid布局使用place-items:center更简洁；3）绝对定位+transform适用于未知尺寸元素；4）绝对定位+负边距适合已知尺寸元素；5）Flexbox+margin方式简洁；6）表格布局兼容性最佳。建议现代项目优先使用Flexbox或Grid，兼容旧浏览器可选表格布局或绝对定位方案，不确定尺寸时推荐transform方法，固定尺寸可用负边距

实现div里的img图片水平垂直居中

最新发布

07-23

我们有两个需求：修改el-descriptions组件的title文字颜色和实现垂直居中对齐。根据Element UI官方文档，el-descriptions组件提供了title相关的属性，但直接设置title样式可能需要通过CSS或内联样式实现。参考...

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

11-28

Vue 中，我们可以在组件的样式中定义相应的布局规则，如 `.video-container .login-form` 选择器，设置 `display: flex`，`justify-content: center` 和 `align-items: center`，使得登录表单无论在什么尺寸的窗口...

4个简单图片垂直居中

06-20

Div与CSS布局，最让人头疼的就是容器内的东西如何垂直居中的问题，兼容IE火狐更多网页制作问题请关注：http://tinycss.blog.163.com/

垂直居中

weixin_43837268的博客

12-20

164

.content { background-color: #F00; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

图片水平垂直居中对齐的四种做法

前端开发博客

07-23

2826

在前端开发制作中，图片垂直居中对齐是很常见的，有些是固定高度，有些没有固定高度，本文分享我用的四种方法，希望对你有所启发。原文：http://caibaojian.com/img-ver...

div中图片img水平垂直居中

全栈羊的搬砖日常

03-24

666

<div class="seeImg"> <img :src="url"/> </div> .seeImg { width: 100%; height: 100%; background: url("../assets/images/background.png") no-repeat center; background-size: 100% 100%; positio.

轮播图居中显示，background-image: vue在html中写:style= 变量

weixin_42371145的博客

04-20

1650

静态的： <div :style="{backgroundImage:'url('+require('../../assets/images/liushu.png')+')'}"></div> 从后台获取的: 轮播图居中：用div进行布局然后把图片设置为div的背景图 设置如下属性，让图片居中，不重复，宽度100%，这是固定高度，让它从两边切。 <div clas...

vue固定比例垂直水平居中

qq_36313551的博客

07-09

906

最近要写的页面需要固定比例的自适应，当当前页面比例小于1920*1080时，网页内容的左右会接触浏览器的左右边，垂直居中；当页面比例大于1920*1080时，网页内容的上下会接触浏览器的上下边，水平居中。如此引用，即可让内容块固定比例自适应缩放，适应各种大小的电脑或浏览器。宽高比大于1920:1080时，上下边接触浏览器边界。宽高比小于1920:1080时，左右边接触浏览器边界。

背景图片居中全屏自适应显示

lyf的博客

11-29

7158

.bg{ background-size: cover; background-image:url(../assets/images/sunshine.png); background-repeat:no-repeat; background-position:center; background-attachment:fixed; }