Reduce image along with div

Question

Hello! I am editing a Front of the Website of the company in which I work and I am currently in the part of the navigation menu. Every time I scroll down it "shrinks" but the Company Logo remains the same size, it doesn’t reduce along with Div.

What I need is some CSS or Javascript so that when the div shrinks, the image reduces together, preferably with some easing effect so it doesn’t get so "dry". If there is no way to reduce it, it can be a CSS/Javascript to change the image, then I put a smaller one, preferably also with an easing effect. Examples:

When you open the page:

When it rolls low pay:

I don’t know if it helps anything but I noticed that a class is inserted in the navigation menu when this transition occurs from "recollection".

Normal code:

<nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                   <a class="navbar-brand" href="index.html"><img src="./front/images/logo1.png" alt="logo"></a>
                </div>

When collected, the Nav changes and looks like this (a top-Nav-Collapse):

<nav id="main-menu" class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="banner">

---

RESOLVED

I just added it to the CSS:

.top-nav-collapse img {
    padding-top: 10px;
    height: 50px;
    text-align: center;
    transition: padding 300ms ease;
}

With your tips I managed to solve, thank you very much!

Answer 1

Dude, since you’re wearing the bootstrap, just wear the class: img-fluid on your tag img. Would look like this:

<a class="navbar-brand" href="index.html"><img class="img-fluid" src="./front/images/logo1.png" alt="logo"></a>

You can access this link to see more about images in Bootstrap:

https://getbootstrap.com.br/docs/4.1/content/images/

Answer 2

Hello try to change your class from navbar-fixed-top for sticky-top

And you can also use the scroll-Smooth property of css to help your effect

html {
  scroll-behavior: smooth;
}

You can also create a css class for your Nav that will create a slower transition

nav{
 transition: padding 300ms ease;
}

As for JS you can use an Event Listener in the window that will call a function when you have a scroll

window.addEventListener('scroll', function(){

  // posição de scroll
  var scrollPosition = Math.round(window.scrollY);

  // Verifica se 100px, e adiciona a class sticky a tua nav
 if (scrollPosition > 100){
      document.querySelector('nav').classList.remove('navbar-fixed-top');
      document.querySelector('nav').classList.add('sticky-top');
 }
 else {
    document.querySelector('nav').classList.remove('sticky-top');
    document.querySelector('nav').classList.add('navbar-fixed-top');
 }
});

For more information you can use the bootstrap doc here https://getbootstrap.com/docs/4.0/utilities/position/