Trying to make navbar brand logo image responsive - css

Question

I googled everything by now and tried everything including img-fluid, did not work, I can't seem to figure out how to make the image responsive (pretty much a beginner lol), if I resize the browser window the image stays the same size, does not scale.
The logo image size that am trying to keep is 734px x 132px
Edit: I have already tried auto height and still doesn't work
.navbar-brand {
color: $primary;
padding: 0;
img {
max-width: 100%;
height: 132px;
max-height: 132px;
#include media-breakpoint-down(md) {
max-height: 132x;
}
}
}
#include media-breakpoint-up(md) {
.header-navbar-top-right-search {
margin-left: auto;
}
}
#include media-breakpoint-up(lg) {
.header-navbar-top-left {
max-width: 42%;
flex: 0 0 42%;
}
.header-navbar-top-center {
max-width: 16%;
flex: 0 0 16%;
}
.header-navbar-top-right-search {
flex: 0 0 auto;
}
.header-navbar-top-right {
flex: 0 0 auto;
}
}
.header-top-line {
background-color: $section-bg;
a:not(.edit-link) {
padding: 22px $spacer 20px;
font-size: 0.8125rem;
line-height: 1.125rem;
}
.login-list > .nav-item a {
font-weight: 700;
}
}
.header-bottom-line {
background-color: $white;
}
.header-quantity-box {
margin-left: $spacer * 0.25;
}
.nav-link,
.search-module .btn,
.header-navbar a {
color: $white;
&:active,
&:hover {
color: $primary;
}
}

Answer 1

Give it some width and put the height as auto.
img{
width: 100%;
height: auto;
}

Answer 2

Update 1
Now see, You can update max-width as your need
Snippet
.navbar-brand {
color: blue;
padding: 0;
}
.navbar-brand img {
max-width: 734px;
height: auto;
width:30%;
margin: auto;
}
#media only screen and(max-width: 768px){
.navbar-brand img{
width: 40%;
}
}
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<a class="navbar-brand" href="#">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" title="borhykerteszetcsomagküldés" alt="borhykerteszetcsomagküldés"></a>
Did this help you 🤨?