Question

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

为什么图像宽度只有在更改任何属性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>

Answer 1

这是个好问题。我不知道为什么这不像预期的那样有效。

但你可以通过将高度应用于元素的规则来修复它：

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

这很有效，但我确定这不是你想要的！

设置max-height（以像素为单位）也可以解决问题。

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

1 个答案: