css怎么css 高度占满屏幕手机屏幕

来源：蜘蛛抓取(WebSpider) 时间：2017-06-20 01:10 标签： css图片占满屏幕
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题：css如何让一张图平铺width 100%;并且高度等于整个手机屏幕的50%？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
最简单的办法：height: 50 width: 100%
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
width: 100%;
height: 50%;
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
width通过css应该就可以，height的话可以通过jquery来实现，大概意思如下，`window.onload=function(){$('#img').css('height',$(documet).height()/2);}`
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
width:100%;
padding-bottom:50%;
backgroud:url(xx)
-----------------------
不对。。看错了，是手机屏幕的50%啊。那无视我这条。_(:з」∠)_
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
宽度当然是100%了，高度的话，如果你熟练用jQuery，就用jQuery获取页面的高度/2不就是一半了么。
$(document).height()/2
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。css设置网页占满屏幕
&!DOCTYPE html&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&
&title&css设置网页高100%宽100%占满屏幕&/title&
&meta name="description" content=""&
&meta name="keywords" content=""&
&style type="text/css"&
margin: 0;
padding: 0;
-moz-box-sizing: border-
-webkit-box-sizing: border-
box-sizing: border-
min-height: 100%;
_height:100%;
height:100%;
min-height: 100%;
_height:100%;
height:100%;
/*background: #ff0000;*/
background: #EEE;
border-left: 1px solid #ff0000;
border-right: 1px solid #ff0000;
padding: 0 20px 0 20
font: 1.5em arial, verdana, sans-
width: 100%;
min-height: 100%;
_height:100%;
#header,#pagefooter,#container {
width: 85%;
border: 1px solid #000000;
#content {
width: 66%;
width: 33%;
.clearfix::before {
content: "";
height: 0;
.clearfix::after {
content: "";
height: 0;
.clearfix {
&div id="all"&
&div id="header"&
&div id="container" class="clearfix"&
&div id="content"&中部内容&/div&
&div id="side"&中部侧边&/div&
&div id="pagefooter"&
没有更多推荐了，
不良信息举报
举报内容：
css设置网页占满屏幕
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！所有回答(5)
按正方形等比缩放， 你可以用js控制。 &控制一个参数（width或height）就行； &
&script type="text/javascript"&
$(function(){
var imglist =document.getElementsByTagName("img");
//安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系统支持
window.onresize = function(){
//捕捉屏幕窗口变化，始终保证图片根据屏幕宽度合理显示
function doDraw(){
_width = window.innerW
for( var i = 0, len = imglist. i & i++){
DrawImage(imglist[i],_width);
function DrawImage(ImgD,_width){
var image=new Image();
image.src=ImgD.
image.onload = function(){
//限制，只对宽高都大于30的图片做显示处理，换成你想要的宽度。
if(image.width&30 && image.height&30){
if(image.width&_width){
ImgD.width=_
ImgD.height=(image.height*_width)/image.
ImgD.width=image.
ImgD.height=image.
园豆：3266
一般我们是不控制图片的&图片都是宽度100%&高度auto
要控制的是装图片的容器宽度一般我们开发手机页面都用Bootstrap&你可以参考下
园豆：1514
图片自适应？ &height 根据整个页面的百分比计算，width就来100%吧！
（比如：页面height：1500px，图片为heig：60px。则就可以设置图片高为：4%，）
这样我基本可以解决图片自适应的问题！嘻嘻
宽度为100%，高度为auto，即width：100%；height:&
比如 外层的class=box
var w=$(".box").width();// 这里获取到宽度
$(".box").height(w) //然后让宽度等与高度就是正方形
清除回答草稿
&&&您需要以后才能回答，未注册用户请先。提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
HTML5 canvas自适应手机屏幕宽高度大小
导读：本来想使用HTML5的canvas做一个手机小游戏，结果第一步canvas自适应屏幕大小就卡住了：&span style=&font-size:14&&&span style=&whit...
本来想使用HTML5的canvas做一个手机小游戏，结果第一步canvas自适应屏幕大小就卡住了：
&span style=&font-size:14&&&span style=&white-space:pre&& &/span&&span style=&white-space:pre&& &/span&&body style=&height: 100%;background-color:&&
&canvas id=&gameCanvas& style=& height: 100%;background-color:&&
您的浏览器不支持HTML5 canvas，请换一个浏览器。
&/canvas&&/span&
本来这段代码也是从网上视频搞到的，但是我发现可能这段代码对于PC浏览器自适应高度有用，但是对于手机就不行了，执行代码效果如下：
把body背景设为蓝色，canvas背景设为红色，大家可以看到二者并未重叠，canvas左上角和body左上角不重合导致上边和左边留有蓝色空白，而且还有滚动条，使用JS代码获取body的宽高度：
//获取屏幕宽度与高度
gWinHeight = document.body.clientH
gWinWidth = document.body.clientW
alert(gWinWidth + &,& + gWinHeight);
结果为（304， 486），但是我的iPhone4的屏幕宽度是320，高度是460(算是状态栏是480)，但是从计算结果来看，宽高度得到的结果明显都不对，也不知道是怎么计算出来的。
从网上找了许多资料，一一试过后，可以使用如下办法，解决手机APP自适应屏幕大小的问题：
&body style=&height: 100%;width: 100%;margin: 0;padding: 0;&&
&canvas id=&gameCanvas& style=& height: 100%;width: 100%;margin: 0;padding: 0;display:&&
您的浏览器不支持HTML5 canvas，请换一个浏览器。
转载请注明（B5教程网）原文链接：
网友评论：怎么让一个页面高度占整个屏幕的
[问题点数：20分，结帖人li]
怎么让一个页面高度占整个屏幕的
[问题点数：20分，结帖人li]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2013年10月 Web 开发大版内专家分月排行榜第三
2013年10月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|

我要回帖

更多关于 css图片占满屏幕 的文章

 

随机推荐