请查看 chrome 中的示例。我尝试使用不应超过父 block 的图像实现行高动画。
为什么图像宽度只有在改变任何属性后才会改变 example ？
尝试点击第一个按钮，图像高度会更新，但宽度不会。然后点击第二个按钮，不透明度会改变，图片宽度会被正确设置。
<!DOCTYPE html>
<html>
<head>
<title>Image resizing</title>
<style>
.header-row {
width:900px;
height:90px;
margin:0 auto;
background:#0f3a51;
-webkit-transition: all .9s ease;
-moz-transition: all .9s ease;
-ms-transition: all .9s ease;
-o-transition: all .9s ease;
transition: all .9s ease;
}
.header-row img {
display: inline;
max-height: 100%;
background:#ff9900;
}
.header-row-reduced {
height:50px;
}
</style>
</head>
<body>
<div id="hr" class="header-row">
<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Volkswagen_Logo.png/600px-Volkswagen_Logo.png" alt="">
</div>
<button id="btn" onclick="check();">Update row height</button>
<button id="btn" onclick="changeProp();">Toggle opacity</button>
<script>
var el = document.getElementById('hr'),
img = document.getElementById('img');
function check(){
var classes = el.className.split(' '),
hasClass = classes.indexOf('header-row-reduced');
if(~hasClass) {
classes.splice(hasClass,1);
} else {
classes.push('header-row-reduced');
}
el.className = classes.join(' ');
}
function changeProp() {
img.style.opacity = '0.5';
}
</script>
</body>
</html>
最佳答案
这是个好问题。我不知道为什么这没有按预期工作。
但是您也可以通过将具有高度的规则应用于元素来修复它:
.header-row-reduced, .header-row-reduced img {
height:50px;
}
这行得通，但我敢肯定这不是您想要的!
以像素为单位设置最大高度也应该可以解决这个问题。
关于javascript - 图片宽度 :auto and max-height after changing parent block height，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20035465/