微信小程序:使用image标签做背景图片并铺满屏幕

这篇具有很好参考价值的文章主要介绍了微信小程序:使用image标签做背景图片并铺满屏幕。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 wxml页面

<view class="container log-list">
  <image class="bg-image" src="/static/game.jpg"></image>
</view>

wxss页面

.log-list {
  display: flex;
  flex-direction: column;
  /* 父元素要设置100% */
  width: 100%; 
  padding: 0;
}

.bg-image {
  /* 将图片铺满:css3计算属性 */
  width: 100%;
  height: calc(100vh);
}

效果:

微信小程序image背景图片全屏,微信小程序,css,微信小程序 

 文章来源地址https://www.toymoban.com/news/detail-770994.html

到了这里,关于微信小程序:使用image标签做背景图片并铺满屏幕的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序image标签的使用

    在小程序中,我们可以使用 image 标签来添加图片。 image 标签有以下属性: src :图片路径,可以是本地路径或网络路径 mode :图片裁剪、缩放的模式,默认为\\\"scaleToFill\\\"(缩放以填充整个容器) 添加指向本地图片的 src 属性后的显示效果: image 标签默认会根据图片的宽高自适

    2024年02月03日
    浏览(56)
  • 微信小程序中背景图片如何占满整个屏幕,拉伸

    不变形 1. 在页面的wxss文件中,设置背景图片的样式: 2. 在页面的json文件中,设置背景图片的样式:

    2024年02月14日
    浏览(107)
  • 四种方法解决微信小程序设置背景图片,哪种最好?

    做了许久的小程序,现在选择用博客记录我遇到的问题以及问题的解决办法,也分享给大家一些自己的心得,记录如下: 在微信小程序当我们使用本地图片作为背景图片的时候我们会参与以下问题。 代码: 在页面使用这个样式的时候小程序会报错。 小程序背景图片无法直接

    2024年02月09日
    浏览(44)
  • uniapp开发微信小程序 ,使用本地图片做背景图应该怎么处理

    注意,把获取可用的base64地址的方法放在computed 里面是非常必要的。如果放在methods里面初次进入这个页面时候会报错(除了首页之外)。这里就是跟methods和computed特性有关。

    2024年02月16日
    浏览(56)
  • 微信小程序使用rich-text解析富文本字符串的时候,遇到image标签图片很大超过屏幕

    场景 : 使用uniapp开发微信小程序,解析富文本文章需求 用到的组件: u-view2.0的u-parse  uniapp提供的rich-text 以上两种组件都是解析富文本的作用,一般用于富文本解析场景,比如解析文章内容,商品详情,带原生HTML标签的各类字符串等,此组件和uni-app官方的 rich-text 组件功能

    2024年02月13日
    浏览(61)
  • 首屏优化,给以图片为背景的元素增加相似背景,优化用户体验,background-image 绘制规则

    每日鸡汤:每个你想要学习的瞬间都是未来的你向自己求救 假设你的项目首页有个大大的图片作为背景,那么这个图片肯定会在网络不好的时候加载出来很慢,导致用户回看到一大片白屏,这样很影响体验。这也是老生常谈的首屏优化的问题。例如 我们可以给这个首屏元素

    2024年02月14日
    浏览(48)
  • css新闻列表案例(li标签和a标签各自控制一个背景图片)

    !DOCTYPE html html lang=\\\"en\\\" head   meta charset=\\\"UTF-8\\\"   meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\"   meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"   title新闻列表/title   style     * {       margin: 0;       padding: 0;       box-sizing: border-box;     }     li {       list-style: none;     }  

    2024年01月19日
    浏览(42)
  • html中图片、音乐、视频标签及选择器、背景

    目录 图片 音乐 视频 子代选择器 交集选择器 背景 文章主要补充之前html文章一些漏洞:HTML常用标签+表格+表单_小俱的一步步的博客-CSDN博客 在VScode中新创建html文件,!+“Tab”键,自动生成html骨架 图片 img src=\\\"图片相对地址\\\"/img      属性: alt:替换文本 title:提示文本

    2024年02月07日
    浏览(52)
  • 微信小程序使用image组件显示图片的方法

    本文实例讲述了微信小程序使用image组件显示图片的方法。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 ① index.wxml 代码如下: image style=\\\"width: 300px; height: 300px; margin:10px;\\\" mode=\\\"scaleToFill\\\" src=\\\"{{imageSrc}}\\\"/image ② index.js Page({ data:{ // text:\\\"这是一个页面\\\" imageSrc:\\\'../..

    2024年02月12日
    浏览(86)
  • PYQT 自带的 Pyrcc 系统的使用,PyInstaller对PYQT程序进行打包,不能打包背景图片,图标等解决办法

    使用 PyInstaller 对程序进行打包,不能打包背景图片。打包后的软件可以正常运行,但涉及到图片相关的资源(如背景图片,头像)全部不显示。 当使用Python PyInstaller对程序进行打包时,如果程序中涉及到背景图片,会出现无法打包背景图片的问题。这是由于PyInstaller默认只会

    2024年02月04日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包