Bootstrap 5 maximum row height causing image to break out of container-CodePudding

I am trying to set a maximum height for a banner I am creating in bootstrap5 like this..

.banner {
    background: red;
    max-height: 50px;
}

<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
 
    <div >
        
            <div >
                <img  src="https://dummyimage.com/600x400/000/fff">
            </div>
            
            <div >
                This is some text for the right hand side of the banner
            </div>

    </div>

</body>

Why is the image breaking out of the banner? I was expecting it to resize itself proportionally because I am using img-fluid. Where am I going wrong>

CodePudding user response：

img-fluid only adds max-width:100% and height:auto since your content is restricted by height and not width you need to add max-width:100%

.banner {
    background: red;
    max-height: 50px;
}
.img-fluid{
    max-height: 100%;
}

<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
 
    <div >
        
            <div >
                <img  src="https://dummyimage.com/600x400/000/fff">
            </div>
            
            <div >
                This is some text for the right hand side of the banner
            </div>

    </div>

</body>