css背景图怎么在手机自适应全屏

html-css09

css背景图怎么在手机自适应全屏,第1张

根据页面设计情况选择相应的参数,方法就是设计背景size参数

background-size:cover ,适用于上半部分背景图片,下半部分纯色

将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。

background-size:contain 适用于一屏幕,缺点屏幕宽度高度不一致,会有缝隙

将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

background-size:100% 100%;

最简单粗暴的方法,缺点会给背景拉伸变形

图片宽度设成100%,理论上不是单色图案、重复背景图案、或js动态生成的画布上的矢量图,jpg之类的是没办法满屏的,320的时候满屏了,横过来看480的时候,高度又少了,可视区外还有一截。

1)按你的操作,读取当前的宽度然后设置到样式中:

var h = $(window).width()

$(".mymsg").css("width", h)

2)css操作:

设置一个div,设置div的宽度为100%,然后设置img的宽度为100%