微信小程序 图片

如果是一个单个的图片放在那里,即使给图片设置了宽高等于图片的宽高,因为图片有一个默认的display:inline-block,所以实际上会有一个间距存在。

设置前

中间这个图实际上应该与上下没有间隙的。

那么如何改掉呢?

给图片设置 display:block;就可以了。

设置后

再一个知识点:让文字高度居中。

以前只知道让高度等于行高可以让文字垂直居中,那么像现在一样需要让文字往下移动一点呢,此时想要居中:

background-color:#f4f4f4;
height:88rpx;
line-height:100rpx;
font-size:32rpx;
text-align:center;
color:#999;
width:100%;

图片高度的一半:25/2=12rpx;
原来的行高:88rpx
加上图片后的这个行高:88+12=100rpx;

设置圆角效果

小程序设置圆角效果,没有办法一下子设置很多个边,但是一个一个的角去设确是可以的。

.d_title{
  background-color: #f4f4f4;
  height:88rpx; 
  line-height:100rpx;
  font-size:32rpx;
  text-align: center;
  color:#999;
  width:100%;
  border-top-left-radius:8rpx;
  border-top-right-radius:8rpx;
}
.d_content{
  background-color: #fff;
  border-bottom-left-radius:8rpx;
  border-bottom-right-radius:8rpx;
}

不是,这个圆角效果设置的那个边的写法是有限制的,可以一下子设置四个。

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 关键词: 微信小程序 图片真实大小 图片模式详解 这两天自己设计了两张微信广告横幅,电脑设计尺寸为750*300像...
    黄雨晴阅读 2,966评论 1赞 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,350评论 1赞 92
  • 图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序...
    极乐叔阅读 1,969评论 0赞 11
  • 微信小程序里面显示图片会用到 image 组件,该组件默认宽度300px、高度225px,使用时需要自己设置宽度 ...
    june5253阅读 6,434评论 1赞 2
  • 是我太背,还是我太笨,身边的人总是玩弄我;是我太放纵,还是我太认真,身边的人总是针对我;是我太邋遢,还是我太...
    想留住的不只有你阅读 192评论 0赞 0

友情链接更多精彩内容