img标签放在div里并且像属性background-image一样充满整个屏幕

外面是一个div里面套着img标签,想实现图片填充满div

    <div class="grid_two">
      <img :src="data.imgurl" alt />
    </div>

样式写法

.grid_two > img {
  display: block;
  height: 100%;
  width: 100%;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: <template> <div class="login-background"> <img src="background.jpg" alt="Background" style="width:100%;height:100vh;object-fit:cover;"> </div> </template> ### 回答2: 在Vue前端项目中,可以使用以下代码实现登录页面背景图片铺满整个屏幕的效果。 1. 在Vue组件的样式文件中,添加如下样式代码: ```CSS <style scoped> .login-container { background-image: url('../assets/login-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; height: 100vh; } </style> ``` 2. 在Vue组件的模板中,将登录页面的内容包裹在一个具有类名`login-container`的容器内: ```HTML <template> <div class="login-container"> <!-- 登录页面的内容 --> </div> </template> ``` 3. 将登录页面的背景图片`login-bg.jpg`放置在项目的`assets`目录下。 以上代码实现了将背景图片铺满整个屏幕,并居中显示在登录页面上。其中,`background-image`属性用于设置背景图片的URL,`background-repeat`属性用于设置背景图片的重复方式,`background-size`属性用于设置背景图片的大小,`background-position`属性用于设置背景图片的位置,`display: flex`通过flex布局使得登录页面内容垂直水平居中,`height: 100vh`用于设置容器的高度为整个屏幕的高度。 ### 回答3: 在Vue前端登录页面中,可以使用以下代码实现背景图片铺满整个屏幕: 在HTML模板中添加如下代码: ```html <template> <div class="login-container"> <!-- 页面内容 --> </div> </template> ``` 在CSS样式中添加如下代码: ```css <style> .login-container { /* 设置页面高度为100% */ height: 100vh; /* 设置背景图片,并设置其大小和位置 */ background-image: url(背景图片的URL); background-size: cover; background-position: center; } </style> ``` 在以上代码中,`.login-container` 类用于设置登录页面容器的样式。通过将容器的高度设置为`100vh`来使其占满整个屏幕。`background-image`属性用于设置背景图片的URL地址,`background-size`属性将背景图片的大小设置为铺满容器,`background-position`属性用于调整背景图片的位置居中。 请将代码中的`背景图片的URL`替换为你想要使用的背景图片的URL地址。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值