JS经典实例网站首页 JS经典实例

js实现容器的宽度等于其高度

发布时间：2016-09-02 20:39:29编辑：雪饮阅读（）

今天遇到一个问题，需要将一个容器的宽度与高度设置一样，但由于客户端的限制，所以容器的width是按照百分比写的，并不是固定数值。据说css3拥有计算功能，但也无法实现此需求。如此以来我们就需要使用强大的javascript功能了。

demo如下：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<?php foreach($auction['imgs'] as $val){?>

<img src="<?php echo "/bearshop/data/upload/shop/auction/".$val['auction_img1'];?>" style="width:100%;" class="xy_img" />

</div>

<?php }?>

var img_height=document.getElementsByClassName('ant-col-8').item(0).offsetWidth;

var xy_ims=document.getElementsByClassName('xy_img');

for(i=0;i<xy_ims.length;i++){

xy_ims[i].style.height=img_height+"px";

}

</script>

</body>

</html>

关键字词：js,宽度等于高度