如何用CSS或者JS设置一张图片，让手机横屏（宽480）看或者竖屏（宽320）看都是满屏。

html-css029

如何用CSS或者JS设置一张图片，让手机横屏（宽480）看或者竖屏（宽320）看都是满屏。,第1张

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

{background:url(../img/top_bg.gif) x-repeat}

问题在repeat，改下设置就好了。

x-repeat：横向。

y-repeat：纵向。

要达到这种效果必须先知道这张图片是已那种形式导进去的，无外乎2种：

1.img标签导入，那么img外层如果没有浮动或者去限定宽度，默认就是填充整个屏幕的宽度，那么就可以设置img{width:100%}这句样式来让其填充满屏幕，记得高度不要设置，不然会让图片变形失真；

2.通过css里面的background-images的方式以背景的形式导进去，那么在html框架里面的图片展示标签必须是撑满屏幕宽度的，然后在样式里面通过background-size:contain让其填充满屏