如何在导航栏中使图像响应 html + css

Question

I am using this code

 <div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <div class="d-flex flex-row justify-content-center align-items-center"> <a class="navbar-brand" href="#"> <img class="img-logo" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="" loading="lazy" style="width:12%;height:auto; float: left;"> <h1 style="color: #89216b; float: right; margin-top: auto; margin-bottom: auto; font-size: all;">Trendings</h1> </a> </div> </div> </nav> </div>

All is perfect but when i see it on mobile image size is small and text size remains same I just want that Image size will not be small

Answer 1

When you use width:12% in img it made image smaller automatically. So I suggested you to remove that code and use this one instead;

.navbar-brand{
  width:100%;
  height:auto;  
}
.img-logo{
  max-width:100%;
  height:auto;
  object-fit:cover;
}

Also in your html;(I removed width and height in style)

<img class="img-logo" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="" loading="lazy" style="float: left;">

Answer 2

Base on what you have,.. you are using some css framework since you have:

d-flex flex-row etc

If so why use inline styling? ...Anyhow if you are going to style anything then edit the image:

.img-logo {
 width: 100%;
 height: auto;
 max-width: 100px;
}

or inline...

<img class="img-logo" src="img" alt="" loading="lazy" style="
    width: 100%;
    height: auto;
    max-width: 100px;
">

100px is just my example you can do correct size by your will. That would be your image style so it can look fine at any size.