我有一个在火狐中工作的函数：
function widthimg() {
var wheight = document.getElementById('recent-img1');
console.log(wheight.clientHeight);
document.getElementById('recent-img2').style.height = wheight.clientHeight +'px';
}
但不是在 Chrome 中，Chrome 根本不显示任何图像（高度为 0 的图像）。
奇怪的是，这两个元素都是图像：
<div class="col-lg-6 col-sm-6 margin-top-60 zoominmouse">
{{HTML::image('images/recentprojects1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit', 'id' => 'recent-img1')) }}
</div>
<div class="col-lg-6 col-sm-6 margin-top-60 zoominmouse" id="test">
{{ HTML::image('images/pricing1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit', 'id' => 'recent-img2')) }}
</div>
所以，当 firefox 读出 wheight.clientHeight 的属性时，我想我试一试：
function widthimg() {
var wheight = document.getElementById('recent-img1');
console.log(wheight.clientHeight);
document.getElementById('recent-img2').clientHeight = wheight.clientHeight;
}
因为我现在将 clientHeight 传递给 clientHeight，这对我来说很有意义，但这在两种浏览器中都不起作用。
所以我的 3 个问题是：
- 我该怎么做才能使该功能在 chrome 中工作？
- 为什么我不能将客户端高度传递给客户端高度？
- 是否有可能用 css 使两个图像都达到 img1 的高度？
可以这样用法：
function widthimg() {
var wheight = document.getElementById('recent-img1');
console.log(wheight.clientHeight);
document.getElementById('recent-img2').clientHeight = wheight.clientHeight;
console.log(document.getElementById('recent-img2').clientHeight);
}
<body onload="widthimg()">
// rest of your html
</body>
只有在加载图像后，您才应该获得 img1 高度，因此您可以将 img2 高度设置为
img1.onload = function() {
img2.height = img1.height;
}