The problem of img display in inline-block elements in IE browser

recently found a problem in the ie browser while working on the project. The maximum width of the display: inline-block-wrapped img is always the original size of the picture, while the maximum width of the display: block-wrapped img is the width of the parent element. As shown below:
IE browser

Chrome

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        img{
            max-width: 100%;
        }
        .container{
            width: 500px;
            padding: 10px;
            border: 1px solid -sharpf60;
            margin: 10px;
        }
        .inline-block{
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="container">
        <h2>IEinlin-block</h2>
        <div class="inline-block">
            <img src="https://car3.autoimg.cn/cardfs/product/g28/M02/C6/9F/1024x0_1_q87_autohomecar__ChsEfVvNn3CALbzCAAidpVCRMmU628.jpg" alt="">
        </div>
        <br>
        <br>
        <h2>IEblock</h2>
        <div class="block">
            <img src="https://car3.autoimg.cn/cardfs/product/g28/M02/C6/9F/1024x0_1_q87_autohomecar__ChsEfVvNn3CALbzCAAidpVCRMmU628.jpg" alt="">
        </div>
    </div>
</body>
</html>