新闻资讯

    在小程序开发中,image组件有一个mode属性可以让我们灵活的操作图片的显示,那么在H5开发中,我们又该如何呢?

    在 H5 开发中,对于图片的显示可以通过 img 标签的方式或者设置 dom 元素的背景图片来实现;

    -image 属性为元素设置背景图像。

    元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

    默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

    tip: 请设置一种可用的背景颜色css 中背景图片定位,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

    eg:

    推荐图片未显示背景色:#

    设置为背景图片之后,接下来我们就可以通过 css 属性来操作图片的显示状态了:

    -:

    - 属性设置是否及如何重复背景图像。

    默认地,背景图像在水平和垂直方向上重复。

    css图片定位 菜鸟_css 中背景图片定位_css 中背景图片定位

    关于 平铺在日常用户:

    1是一整张大图,尺寸和区域大小刚好吻合

    2是一个很小的条状图,通过后,形成一个很规则的大图背景。

    -:

    - 属性设置背景图像的起始位置。

    这个属性设置背景原图像(由 -image 定义)的位置,背景图像如果要重复,将从这一点开始。

    eg:

    -clip:

    -clip 属性规定背景的绘制区域。

    默认的,元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

    但是有了-clip之后,我们可以修改了。

    css图片定位 菜鸟_css 中背景图片定位_css 中背景图片定位

    语法

    background-clip: border-box | padding-box | content-box;
    

    值:

    -:

    - 属性规定 - 属性相对于什么位置来定位。

    background-origin: padding-box | border-box | content-box;
    

    ps: 配合 -clip以及-来使用可以应对大多数需求。

    -size:

    -size 属性规定背景图像的尺寸。

    定义和用法

    css 中背景图片定位_css 中背景图片定位_css图片定位 菜鸟

    默认值:auto

    继承性:no

    版本:

    语法:.style.="60px 80px"

    语法

    background-size: length | percentage | cover | contain;
    

    eg:

    -fit

    -fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

    您可以通过使用 - 属性来切换被替换元素的内容对象在元素框内的对齐方式。

    PS: 这个 CSS 属性同小程序 image 组件中的 mode 属性及其类似,如果我们不知道图片的具体大小,那么这个属性对我们是非常有帮助的:

    css 中背景图片定位_css 中背景图片定位_css图片定位 菜鸟

    默认值:-fit: fill;

    被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。

    eg:

    正式语法:

    object-fit: fill | contain | cover | none | scale-down
    

    (重点):

    被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。

    这个对我们是很有帮助的,如果我们通过接口获取到的图片数据,我们不知道它图片宽高或者把它约束在某在宽高区间里,用这个是很方便的。比如给轮播图的图片设置上这个属性就是很不错的选择。

    eg:

    cover(重点):

    被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。

    css图片定位 菜鸟_css 中背景图片定位_css 中背景图片定位

    PS:

    这个用于小图展示的话真的超级棒,比如我们要实现一个微信朋友圈九宫格图片上传时,我们一点在把图片约束在一个比例的同时也保证了图片不失真显示,那么用这个准没错,至于想看到具体图片,可以写个点击事件,点击图片预览即可!

    fill(默认值):

    被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。

    PS:

    这个基本上没人用css 中背景图片定位,其实觉得默认的如果是 cover好一点。

    none:

    被替换的内容将保持其原有的尺寸。

    scale-down:

    内容的尺寸与 none 或 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

    PS: 有点难以理解,不过这个值基本上不用,不用管也没关系。

网站首页   |    关于我们   |    公司新闻   |    产品方案   |    用户案例   |    售后服务   |    合作伙伴   |    人才招聘   |   

地址:北京市海淀区    电话:010-     邮箱:@126.com

备案号:冀ICP备2024067069号-3 北京科技有限公司版权所有