他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)css怎么让一张图片不失真的适应任何屏幕大小的电脑平铺?_百度知道
css怎么让一张图片不失真的适应任何屏幕大小的电脑平铺?
我有更好的答案
纵向铺满，横向留有空隙或超出屏幕：body { background-size:100%}2，纵向留有空隙或超出屏幕:auto 100%; background-size:100% 100%;}下面是图片不失真但不保证是否完全铺满（留有空隙或者超出屏幕）的css代码：1、横向铺满：background-size属于css3，只有支持css3的浏览器才有效单张图片“铺满屏幕”与“不失真”之间是矛盾的，铺满屏幕就必然会使图片的长宽比例发生变化造成失真，除非图片的长宽比例刚好与屏幕的长宽比例完全一致。下面是铺满屏幕但不保证是否失真的css代码：body {}补充说明：body {background:url(图片路径) no-repeat center:url(图片路径) no- background-size:url(图片路径) no-repeat
采纳率：83%
不失真代表屏幕大小不能超过图片的原大小，这不可能；顶多实现宽高比不改变
本回答被网友采纳
这个真没有
宽度用百分比
用svg格式的图片就可以
在默认状态下（或者说不做任何特殊的css设置的情况下），作为背景的图片都是不失真地进行平铺的啊。当然，我所理解的“不失真”是指图片的长宽比例保持不变，如果你有其他的解释请说明。
主要是不要平铺的，背景拉宽时，图片也铺满屏幕，且不失真
单张图片“铺满屏幕”与“不失真”之间是矛盾的，铺满屏幕就必然会使图片的长宽比例发生变化造成失真，除非图片的长宽比例刚好与屏幕的长宽比例完全一致。下面是铺满屏幕但不保证是否失真的css代码：body {background:url(图片路径) no- background-size:100% 100%;}下面是图片不失真但不保证是否完全铺满（留有空隙或者超出屏幕）的css代码：1、横向铺满，纵向留有空隙或超出屏幕：body {background:url(图片路径) no- background-size:100%}2、纵向铺满，横向留有空隙或超出屏幕：body {background:url(图片路径) no- background-size:auto 100%;}补充说明：background-size属于css3，只有支持css3的浏览器才有效。
本回答被网友采纳
1条折叠回答
其他3条回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。html怎么让图片自动适应屏幕大小？而且图片不会重复！_百度知道
html怎么让图片自动适应屏幕大小？而且图片不会重复！
我有更好的答案求助知道网友
不设置宽高即可！不会重复是什么意思！
你这是背景图才会重复的吧！！背景图不重复 是 background:url() no- 设置宽度width:100%;！
用百分比不就行了
用百分比就成这样了
width: 1200 position: left: 50%; margin-left: -600这个是CSS把你的 最外层的div 设置如上
宽度 你可以自己改
宽度为1200像素，然后-600px指的是屏幕的中线离你的图片左边600px，这样离右边不也就是600px了
所以就放中间了嘛
可以用CSS的属性background-size:100% 100%;
我把表格也改成100%，图片就重复了
你得这样设置，首先是设置background:url(图片地址) 0 0 no-repeabackground-size:100% 100%;
额 。。。还是不太懂
你得这样设置，首先是设置background:url(图片地址) 0 0 no-repeabackground-size:100% 100%;还有一种方式就是不用设置背景图片，&div id=&overby&&&img src=&xxxx.xxx&/&&/div&你可以把DIV设置成绝对定位，z-index指定得很小；然后通过JS动态的去改变DIV和图片的宽高就OK了
本回答被提问者采纳
1条折叠回答
为您推荐：
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。css 问题，插入图片，超出浏览器宽度，不出现水平滚动条。_百度知道
css 问题，插入图片，超出浏览器宽度，不出现水平滚动条。
图片上有详细说明，请大神解答，太感谢了。
我有更好的答案
建一个div容器，用div包裹img，即可。&div style=&width:100%; overflow: height: text-align:&&
&img src=&abc.png& /&&/div&或者将图片当作背景来使用（需要固定容器高度）：&div style=&width:100%; overflow: height:200 background:url(abc.png) no-&&&/div&当然，也可以使用Js来处理，不过不建议使用Js作过多网页版式设置。
嗯，我想用ul包含多个li图左浮动，来做滚动图。还要满足上面的要求，愁死了。
其实没必要用ul/li来设置的，直接全部用div/span就可以了，现在浏览器对这些标签的限制少很多了。并且如果使用Js来实现左右滑动，就应该使用Js来设置容器宽度，li全部浮动，用style.transform位移。下面这个是单独通过CSS样式实现的。&style type=&text/css&&.container {width:100%; overflow:}.ul {list-style: height: margin:0 padding:0 overflow:}.ul li {display: float: margin:0 width:1000 overflow: padding:0}&/style&&div class=&container&&
&div style=&width: height: padding-left:50%;&&
&div style=&display: float: width:1000 overflow: margin-left:-500&&
&ul class=&ul& style=&width:3000&&&!--此处有多少个li就设多少大值，宽度满足可左右滚动--&
&li&&img src=&abc.png& /&&/li&
&li&&img src=&abc.png& /&&/li&
&li&&img src=&abc.png& /&&/li&
&/div&
&/div&&/div&&!-- 注：外围三个DIV容器实现居中 --&
采纳率：45%
center这样应该就可以了。但是前提是这个div要直接在body下面:text-align，将div设置width:overflow:100%;heightimg外侧包裹一层div
谢谢，但是我用一个层把网页宽度设定为1000px了。怎么办呢？
如果是按照楼主的要求，最外层就不要包裹一层div了，如果包裹了实现不了滚动条了
&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&&html&xmlns=&&head&&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&/&&title&demo&/title&&style&type=&text/css&&@charset&&utf-8&;/*&Default&global&style&hyperlink&style&,&time&:&12/12/2014&*/a{color:#333333;&text-decoration:&outline:}a:hover{color:#80b50a;&text-decoration:}/*&main&style&*/*{font-family:&微软雅黑&,&Arial}body{height:100%;&min-height:100&_height:100%;}body,div,span,form,img,ul,ol,li,dl,dt,dd{margin:0&padding:0&font-size:12&border:}ul,h1,h2,h3,h4,h5,p{padding:0;&margin:0;&list-style-type:&font-weight:}h2{color:#006ed3;}h3{font-size:24}h4{font-size:14&font-weight:}ul,li,dl,strong{list-style-type:}button,textarea,select{font:100%&&微软雅黑&,&A&border:}.clear{height:0;&line-height:0;&font-size:0;&clear:}/*demo&css*/.demo_div{margin:100px&auto&0&width:800&height:450&background:#99cc33;&overflow:&position:}.one{width:800&height:400&position:&top:0&left:0&z-index:1;}.one&.win1{width:800&height:400&position:&top:0&z-index:1;&display:}.one&.text{width:200&height:50&position:&bottom:-50&background:#&text-align:&line-height:50}.one:hover&.win1{display:}.two{width:800&height:400&position:&top:0&left:0&z-index:2;}.two&.win2{width:800&height:400&position:&top:0&z-index:2;&display:}.two&.text{width:200&height:50&position:&bottom:-50&left:200&background:#&text-align:&line-height:50}.two:hover&.win2{display:}&/style&&/head&&body&&div&class=&demo_div&& &div&class=&one&&&&&& &div&class=&win1&&style=&background:#0000&&11&/div&&&&&&&&&&div&class=&text&&Slide_01&/div&&&&&&/div&&&&&&&&&&div&class=&two&&&&&& &div&class=&win2&&style=&background:#666666;&&22&/div&&&&&&&&&&div&class=&text&&Slide_02&/div&&&&&&/div&&/div&&/body&&/html&你看看是不是你要的那种效果，手动鼠标hover后会更换，你要滚动图片的时候，在div里面用背景来显示就可以&background:url(xxx.jpg) no-没有JS的话好像做不了定时器之类的功能哦，除非你用css3，就可以实现这个功能，你可以参考这个：
把这个图片做成背景
这个我试过，我还得让好几个图片左浮动做滚动图。
那只好把你的滚动图改种表现方式了
其他1条回答
为您推荐：
其他类似问题
插入图片的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
需求：页面内容包括图片和文字两部分，图片在上，文字在下，各占手机屏幕高度的50%,要正好适应屏幕高度，不可以出现类似滚动条的上下滑动。
由于要适应所有手机，屏幕大小和比例不固定。
类似这样的效果：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以用 height:50文档: vh是视口高度的 1/100。需要设置&meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1"&
还有一种方案 html和body都设置height:100% 也可以达到占满屏幕的效果 然后上下都设置50%高度就是了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Css不太好弄，但是JS可以。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&top&/title&
&style&*{margin: 0;padding: 0}&/style&
&div style="width: 100%;height: 100position:top: 0;left: 0;background-color: #1b6d85" id="ball"&&/div&
&script type="text/javascript"&
var ball=document.getElementById('ball');
var h=window.innerHeight/2;
ball.style.height=h+'px';
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
给html,body高度设置成100%，然后给图片和文字分别设置50%
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}