Image in CSS-Class resizing

January 28, 2022

nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  text-align: center;
}

.logo {
  width: 10%;
}

<nav>
  <div class="logo">
    <img src="img/Logo.png" alt="Business logo" />
  </div>

  <div class="links">
    <a href="#Home">Home</a>
    <a href="#About">About</a>
    <a href="#Products">Products</a>
    <a href="#Blog">Blog</a>
    <a href="#Contact">Contact</a>
  </div>
</nav>

When declaring a class in HTML and then invoking in CSS i am having an issue trying to resize an image in the NAV to be smaller. Once looking at the image in the VS code live function i can get the image to go bigger but not smaller. im a bit confused but i am sure it is something small. would anyone be able to look at this and see whare i am messing up?

>Solution :

It will work better if you designate the class on the image you want to resize. For example, you have logo on your parent div that’s nests the image, put the class directly on the image. See the changes I made below.

I added a 500x500px dummy image to demonstrate the size change. So if you declare a width: 10%; on an image with an intrinsic size of 500×500, it will render 50px for the width.

.logo {
  height: 100%;
  width: 10%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
}

.logo-parent {
  width: fit-content;
}

.links {
  white-space: nowrap;
}

<nav>
  <div class="logo-parent">
    <img src="https://dummyimage.com/500x500/000/fff&text=I'm+Resizing" alt="Business logo" class="logo" />
  </div>

  <div class="links">
    <a href="#Home">Home</a>
    <a href="#About">About</a>
    <a href="#Products">Products</a>
    <a href="#Blog">Blog</a>
    <a href="#Contact">Contact</a>
  </div>
</nav>