Javascript 图像宽度：更改父块高度后的“自动”和“最大高度”_Javascript_Html_Css

Javascript 图像宽度：更改父块高度后的“自动”和“最大高度”

javascript html css

Javascript 图像宽度：更改父块高度后的“自动”和“最大高度”,javascript,html,css,Javascript,Html,Css,请参阅chrome中的示例。我尝试使用不应超过父块的图像实现行高动画为什么图像宽度仅在更改任何属性后才更改尝试单击第一个按钮，图像高度将更新，但宽度编号。然后单击第二个按钮，不透明度将更改，图像宽度将正确设置 <!DOCTYPE html> <html> <head> <title>Image resizing</title> <style> .header-row {

请参阅chrome中的示例。我尝试使用不应超过父块的图像实现行高动画

为什么图像宽度仅在更改任何属性后才更改

尝试单击第一个按钮，图像高度将更新，但宽度编号。然后单击第二个按钮，不透明度将更改，图像宽度将正确设置

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


图像大小调整
.标题行{
宽度：900px；
高度：90px；
保证金：0自动；
背景#0f3a51；
-webkit过渡：所有.9的易用性；
-moz过渡：所有.9秒轻松；
-ms过渡：所有0.9秒轻松；
-o型过渡：所有0.9秒轻松；
过渡期：全部9秒轻松；
}
.标题行img{
显示：内联；
最大高度：100%；
背景：ff9900；
}
.标题行减少{
高度：50px；
}
更新行高
切换不透明度
var el=document.getElementById（'hr'），
img=document.getElementById（'img'）；
函数检查（）{
变量类=el.className.split（“”），
hasClass=classes.indexOf（'header-row-reduced'）；
如果（~hasClass）{
类别。拼接（HASSCLASS，1）；
}否则{
class.push（'header-row-reduced'）；
}
el.className=classes.join（“”）；
}
函数changeProp（）{
img.style.opacity='0.5'；
}

这是个好问题。我不知道为什么这不是预期的效果

但您也可以通过对元素应用高度规则来解决此问题：

.header-row-reduced, .header-row-reduced img {
        height:50px;
}

这是可行的，但我肯定这不是你想要的

以像素为单位设置最大高度也可以解决这个问题。

是的，这不是我想要的。我也试过了。设置img显示的其他事项：块。在这种情况下，内联和内联块元素（img将display:inline作为默认值）似乎无法正确使用“最大高度”。