uniapp image标签图片不会居中显示

最新推荐文章于 2024-07-18 10:13:50 发布
最新推荐文章于 2024-07-18 10:13:50 发布
阅读量6.4k 收藏 7
点赞数 4
分类专栏： Uni-app 文章标签： uni-app 图片居中 CSS样式 uni-image display:block
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjh01/article/details/120123083
版权

用image标签时，图片是自动靠左，如果图片不足够大的话，右边就会有空白。
系统默认的是
uni-image {
display: inline-block;
}
可见是行内块
这个时候在自己的页面下，配置css
可以转换为 display:block 然后margin： 0 auto；
这样就能实现居中了

xjh01
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
UIImageView的图片居中问题
zhoutao198712的专栏
04-05 6万+
我们都知道在ios中，每一个UIImageView都有他的frame大小，但是如果图片的大小和这个frame的大小不符合的时候会怎么样呢？在默认情况，图片会被压缩或者拉伸以填满整个区域。 通过查看UIView的属性可以知道，view的contentMode属性可以用来控制图片的显示情况。下面的设置可以让图片进行居中显示。 imageView.contentMode = UIVie
uniapp实现 图片九宫格、可控制一行显示几个
04-29
使用uniapp 实现图片九宫格、完美动态适配手机各种尺寸、已抽离成组件 只需修改单个字段 实现页面布局、 class="pic-container" :style="{ paddingLeft: spacingNumber + 'px', paddingRight: ...
图片水平垂直居中
01-24
图片水平垂直居中 用很精简的代码，实现图片水平垂直居中 效果
uniapp中图片不居中问题
imkaifan的博客
04-25 9594
uni-image { display: inline-block; } 可见是行内块 可以转换为 display:block 然后margin： 0 auto；
uniapp 图片水平垂直居中
最新发布
2301_78029091的博客
07-18 464
uniapp 图片水平垂直居中
uni-app中image组件的基本使用
Acapplella的博客
08-04 9391
image组件的使用 属性名 类型 默认值 说明 平台差异说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪、缩放的模式 Tips <image> 组件默认宽度 300px、高度 225px； src 仅支持相对路径、绝对路径，支持 base64 码； 页面结构复杂，css样式太多的情况，使用 im...
uniapp小程序端适配屏幕宽度/图片居中
Aftery的博客
01-06 6808
前言： 在Uniapp项目开发之中，如果在小程序上需要做屏幕的宽度适配，如：做image的时候，让宽度拉伸到所有image标签，左右隔10px。用width=“100%”是不行的，只能显示一半。因此，按如下去获取宽度： <view class="journa_view" v-show="item.isImageShow"> <image :style="{'width':xw_whith-20+'px'}" :src="item.allimage" @click="TanPreviewIm
uni-image踩坑：默认下边距的处理
weixin_45648000的博客
01-02 1623
问题情况 在uniapp中使用image组件遍历出的结果如下，查证问题，都不是内外边距造成的； 直接上处理结果 在html的image标签中增加display:block； 注意：在css文件中加是无效的； <image mode="widthFix" :src="item.thumb" style="display: block;"></image> ...
微信小程序image 常用mode类型
seve_nnight的博客
08-10 2276
默认scaleToFill mode string scaleToFill 否 图片裁剪、缩放的模式 5个缩放模式，9个裁剪模式，裁剪模式不常用，缩放模式中常用aspectFill和widthFix mode 的合法值 值 说明 最低版本 scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可...
vant-image本地图片无法显示
01-07
文档也没有写怎么加载本地图片，到处挖坑。如图： 加载失败 解决办法： src属性绑定requeir（）方法 :src=require('../assets/logo.png') 完美解决： 加载失败 //script(vue) data() { return { //图片...
summernote图片居中显示
09-26
总之，通过修改`summernote.js`文件中的代码，我们可以成功地让Summernote支持图片居中显示。这种方法不仅保留了Summernote的原有功能，还增加了自定义的用户体验。对于那些需要在网站或应用中使用Summernote的...
android imageview图片居中技巧应用
09-05
做UI布局，尤其是遇到比较复杂的多重LinearLayout嵌套，常常会被一些比较小的问题困扰上半天,可是无论怎样设置layout_gravity属性,都无法达到效果
Li list-style-image 图片垂直居中
01-19
list-style-image 图片垂直居中 如果使用list-style-image设置了一个列表项的前面的小图标，在FF下是正常显示的， 但是在IE下想让他也居中正常的显示，死活不听话。 退而求其次，找了一个折中的解决办法， 就是...
uniapp image高度不自适应
qq_17627195的博客
07-30 1075
iamge中的属性mode=“widthFix”就可以了。
使用uniapp开发系统懒加载图片效果
csdndddsd的博客
11-24 1368
在上述代码中，我们定义了两个方法handleLoad和handleError，用来处理图片加载完成和加载失败的事件。当图片加载成功时，我们将showImage的值设为true，图片将显示在页面上。当图片加载失败时，我们将imageUrl的值设为占位图片的地址，确保页面上始终有一个图片在展示。当页面加载时，图片不会立即加载，而是在需要时才进行加载，节省了页面加载时间，提高了用户体验。需要注意的是，在实际的项目中，我们可能会根据具体需求扩展懒加载图片效果，例如在图片出现在可视区域时才加载图片。
【uniapp】长方形图片显示中间正方形部分不压缩图片（圆形展示）
y_coder的博客
06-14 1518
组件时，如果要将长方形图片显示为中间的正方形部分，可以使用 CSS 来实现裁剪效果。，让图片宽度等于盒子的宽度高度自适应。再将图片父盒子设置宽高以及使用。的话，超出高度的图片也有可能挤压别的盒子，导致其他元素错位。使得图片水平垂直居中。在使用 uni-app 框架的。来达到超出部分不显示的目的。
uni-app：实现元素在屏幕中的居中（绝对定位absolute）
weixin_46001736的博客
09-27 4917
uni-app：实现元素在屏幕中的居中（绝对定位absolute）
实现图片水平垂直居中
u014582551的博客
09-24 235
代码如下：&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;style type="text/css"&gt; .div1{ width: 500px; height: 500px; background-color: red; position: absolute; } .div2{ width: 300px; height: 200px; ba...
uniapp中如何使用image图片
精通前端技术，了解后端接口
12-26 5699
当在UniApp中使用图片时，可以通过标签将图片显示在页面上。这个标签可以指定src属性来引用图片，并且可以通过mode属性来设置图片的显示模式。除此之外，还可以利用@click事件来实现图片的点击事件。在编写代码时，要注意引用图片的路径和处理图片的点击事件，以及适配不同屏幕尺寸的情况。UniApp中的图片使用相对简单，下面的博客将详细介绍UniApp中图片的使用方法以及相关注意事项。
uniapp图片居中显示
05-20
Uniapp中可以使用flex布局实现图片居中显示。具体方法如下： 1. 在image标签的父级元素上添加`display:flex`，使其成为一个flex容器。 2. 使用`justify-content:center`和`align-items:center`属性来实现图片水平和垂直居中。 示例代码如下： ``` <template> <view class="container"> <image class="center-img" src="图片链接"></image> </view> </template> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .center-img { width: 300rpx; height: 300rpx; } </style> ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值