- 程序猿 JS js 背景 图片 浏览器 自适应... (shuke.2016-06-16 03:47)
<style type="text/css">
#div {
width: 100%;
background: url("bg.jpg") no-repeat;
background-size: 100% auto;
border: 1px solid #f00;
}
</style>
<script type="text/javascript">
function resizeDiv() {
// 获取 div 元素
var div = document.getElementById("div");
// 兼容 style
var style = div.currentStyle || getComputedStyle(div, false);
// 从 url("/path/to/image.jpg") 中获取图像地址
var img_src = style.backgroundImage
.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
// 创建新图像
var img = new Image();
// 图像加载
img.onload = function() {
// 获取宽高比
var ratio = img.width / img.height;
// 根据比例设置 div 高度
div.style.height = parseInt(div.offsetWidth / ratio) + "px";
img = null;
};
img.src = img_src;
};
// 页面加载，设置 div 高度
window.onload = function() {
resizeDiv();
};
// 窗口变化，设置 div 高度
window.onresize = function() {
resizeDiv();
};
</script>
<div id="div"></div>
-
2 楼 shuke[2016-06-16 15:50]
实战完整版本：
<style type="text/css">.banner{ width:100%;background:blue url(http://localhost:63342/home_html/img/culture_banner.jpg) no-repeat;display:block;border:gray solid 0px; }</style>
<div id="banner" class="banner"></div>
<script type="text/javascript">
/*power by shuke 2016/6/16 */
function bg_auto(div){
var divelement = document.getElementById(div); //获取ID
//var divelement =document.getElementsByClassName(div)[0]; 也可以用CLASS来循环
//获取图片地址并赋值给IMG；
var style = divelement.currentStyle || getComputedStyle(divelement, false);
var img_src = style.backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
var image=new Image();
image.src=img_src; //可以换成以传进来的ID来命名的图片 如：image.src='http://xxx.com/img/banner_'+div+'.jpg';
//新图片不能超过原图高度，否则会失真；
if(divelement.offsetWidth<image.width){
//进行1：1的填充
divelement.style.backgroundSize='100% 100%';
//DIV的高度等于图片缩放后的高度，也就是等比适应；
var myheight=eval(image.height*divelement.offsetWidth/image.width);
}else{
//图片超过原图高度不做适应，维持原状；
divelement.style.backgroundSize='auto';
var myheight=eval(image.height);
}
//重新给盒子高度；
divelement.style.height=myheight+'px';
};
//pic start
bg_auto('banner');
window.onresize = function(){
bg_auto('banner');
};
</script>
/*精简版本
function bg_auto(div){
var divelement = document.getElementById(div);
var style = divelement.currentStyle || getComputedStyle(divelement, false);
var img_src = style.backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
var image=new Image();
image.src=img_src;
if(divelement.offsetWidth<image.width){divelement.style.backgroundSize='100% 100%';var myheight=eval(image.height*divelement.offsetWidth/image.width);
}else{ divelement.style.backgroundSize='auto';var myheight=eval(image.height);}
divelement.style.height=myheight+'px';
};
bg_auto('banner');
window.onresize = function(){
bg_auto('banner');
};
*/
-
- 解决织梦图集中上传图片时跳出302错误
网站自定字体，压缩字库让网页字体与图标 *.EOT是一种压缩字库，目的是解决在网页中嵌入特殊字体的难题。例如：网页前端开发人员在网页中使用... 查看详情
酷能微日志V1.1发布 酷能微日志V1.1发布一，PHP文件，无需数据库(日志生成TXT文件保存在DATA里)。3个文件搞... 查看详情
PHPCMS调用自动广告的问题 可以专门建立一个或者几个栏目，用于放置不同的广告。在后台建立栏目时，可以先填写广告栏目的ID，在加... 查看详情
js 图片带点幻灯播放效果，适合做BA 这个效果很适合BANNER，可以加连接，也可以做幻灯片。有图有真相：... 查看详情
【原创】phpcmsv9 关于站群同布 1.首先，建立一个发步点，填写FTP相关地址，为的是能够发步到你网站空间里。这样子你的网站就不要后... 查看详情