js获取背景图片宽高比后根据浏览器宽度动态赋值div.style.height

Posted 2023-03-20

div的width:100%，background-size:100% auto。div宽度这样是根据浏览器窗口宽度自适应，div高度要js赋值。js获取背景图片长宽，计算出宽高比。div实时宽度*背景图的长宽比=div高度。

代码大致如下供参考：

var image=new Image();
image.src=//你的背景图片的src;
var divelement = document.getElementById(你的div的id);
divelement.style.height=(image.height*divelement.offsetWidth)/image.width + "px";

几个需要注意的地方是image.src=xxx后需要等待直到图片下载完成。但是如果这个脚本是在你的div已经初始化好之后调用的话，那么图片已经被下载过了，所以直接进行后面的就好。另外以style.height来设置高度的话后面需要加单位，比如px

追问

读不出图片的宽高啊，方便Q么

追答

图片加载完成后使用是一定能读出宽高的。
我说过image.src=xxx后需要等待直到图片下载完成，可以使用image.onload来实现，参考3楼的做法。也可以settimeout定期检测image的状态看看是否完成。总之要等到图片加载完成后再进行后面的

参考技术A

【注意】因为百度知道这几天的高亮显示不正常，下面代码中前面的空格都是【全角】，你复制粘贴之后自己用编辑器查找/替换全部吧。

<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>

参考技术B 用image的onload来触发嘛：
image.onload=function()
div.style.height=(this.height*div.offsetWidth)/this.width + "px";

这个bd的智能检测还真是垃圾货，竟然说我上面的内容没有意义，额……
这个bd的智能检测还真是垃圾货，竟然说我上面的内容没有意义，额……本回答被提问者和网友采纳 参考技术C new Image(); 我粗略一看代码不错。
但仔细一看
这是html5增加的image对象
在ie9以上浏览器或其他浏览器可以使用
offsetWidth支持也不同
最重要的是少了加载完成事件onload 图片没加载完怎么用
后面不加px也是可以的事实证明一切 但最好加上

保持宽高比的宽度自适应盒子

基本原理

元素的padding的百分比值是基于其父元素的宽度计算的，如此，设置元素宽度width:25%，元素高度不设定，元素padding-bottom:75%，就可以得到一个高宽比为3:1的盒子。或者，元素的宽高都不设定，设置元素的padding-right: 25%，padding-bottom:75%，也可以得到一个高宽比为3:1的盒子。

使用场景

通常用在图片宽度自适应，并且需要保持高宽比的地方，例如商品列表页面。示例代码如下：

<div class="imgc">
    <img src="...">
 </div>

.imgc {
  width: 100%;
  position: relative;
  padding-top: 75%;
   > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;  
  }
}

或者

.imgc {
    padding: 0 50% 66.66% 0;
}