1
chengqiang1992 OP 好吧,那我弱弱的问个问题。如何使得一张图片自适应屏幕宽高?
我把自己的 demo 贴出来吧 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <!--适配移动端 开始--> <meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <!--忽略将页面中的数字识别为电话号码--> <meta name="format-detection" content="address=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <!--离线应用--> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--隐藏状态栏--> <!--适配移动端 结束--> <title>全屏广告测试</title> <style type="text/css"> /*CSS 样式初始化 开始*/ body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} /*CSS 样式初始化 结束*/ /*@media screen and (max-width:480px){ img { width:100%; height:480px; } } @media screen and (min-width:320px) and (max-width:480px){ img { width:100%; height:200px; } }*/ img{ width:100%; height:100% } </style> <script type="text/javascript"> //alert(window.screen.width); //alert(window.screen.height); </script> </head> <body> <img alt="广告页面" src="E:\Web 前端\Bootstrap 以及模板\Matericak_Picture\Design-Quotes18.jpg"> </body> </html> |
2
oott123 2015-09-27 22:28:16 +08:00
|
3
chengqiang1992 OP @oott123 没有效果,我之前就试了,刚又试了。现在在考虑通过 js 获取屏幕高度,然后再设置 CSS 的 height 属性值
|
4
m939594960 2015-09-27 22:36:12 +08:00
给图片定位 ab 的 最好是 fixed 的 然后再给 100%
|
5
oott123 2015-09-27 22:37:56 +08:00 1
|
6
chengqiang1992 OP @oott123 非常感谢。非常感谢。可能是我没有把需求说清楚,可以加你企鹅或微信详聊吗? 当然也蛮晚了。我的都是 867763618
|
7
oott123 2015-09-27 23:23:15 +08:00 via Android
抱歉,我之所以在公众场合试图为别人解答问题,是希望能够帮助后来者。
我不擅长,也没有兴趣进行手把手的教学。 不过话又说回来了,如果你是个妹子还可以考虑一下… |
9
ccccccc 2015-09-28 11:37:32 +08:00
|