div背景图片 随div固定在浏览器底部缩放而改变（不变形）

来源：蜘蛛抓取(WebSpider) 时间：2015-04-13 08:42 标签： div高度自适应浏览器
div设置背景图片,窗口宽度变小后背景图片会缩小变成两个三个,css应该怎么改?_百度知道
div设置背景图片,窗口宽度变小后背景图片会缩小变成两个三个,css应该怎么改?
宽度是用百分比设置的，高度固定
提问者采纳
但是IE8以下的内核浏览器不支持。js也可以实现，但比较麻烦，侦测窗口变化。这个兼容性好，但这是正确方法,两个的背景属性不一样，如div_a变为div_b，改变div的class属性css3的background-size和media query可以实现
提问者评价
其他类似问题
背景图片的相关知识
按默认排序
其他2条回答
背景不循环no-repeat
不懂你想什么
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁&很多flash站都用到了一张背景图，然后根据浏览器大小自动缩放，但图片不变形。
在CSS3中，有属性：
background-size:
//只支持IE9+
-webkit-background-size: //webkit核心
-moz-background-size: //FF核心
-o-background-size: //应该是Opera核心吧，反正不是IE的，就先不管它了
以上几个css3属性都可以很好的支持根据浏览器大小自适应大小
下面看看效果：
1. 采用直接显示图片列表的方式：
&img src='...' style='width:100 height:100 border:1px solid #' /&
可见，在原图宽高比不是1:1的情况下，图片就会变形。而且在图片上层加上其他效果，如删除等弹出层很不方便。
2. 采用背景的方式：
style='background:url(...) no- width:100 height:100 border:1px solid #'&&/div&
图像不变形了，但是大图就看不到图像的全貌了：
3. 采用&background-size实现智能平铺：
style='background:url(...) no-
width:100 height:100
border:1px solid #
background-size:
-webkit-background-size:
-moz-background-size:
-o-background-size:'&
处理后，比较令人满意，图片没变形，也能看到图片的全貌。缺点是图片会有一部分被截掉，不过不太影响大局。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：16035次
排名：千里之外
原创：70篇
转载：48篇
(3)(10)(3)(12)(7)(8)(6)(10)(7)(1)(6)(27)(2)(3)(4)(10)扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
控制IMG图片的大小缩放
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口

我要回帖

更多关于 div高度自适应浏览器 的文章

 

随机推荐