JS获取背景图片宽高比根据浏览器宽度动态赋值,获取图片高度

jquary获得图片的高度宽度

window.onload=function(){
var imgH = $(“#bimg1”).height();
$(“#slide”).height(imgH);
}

~~~~~~~~~~~~~~~~~~~

JS获取背景图片宽高比根据浏览器宽度动态赋值

1
2
3
4
5
6
7
8
<style type="text/css">
#div {
  width: 100%;
  background: url("bg.jpg") no-repeat;
  background-size: 100% auto;
  border: 1px solid #f00;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>
1
<div id="div"></div>

发表评论