Image in CSS-Class resizing-CodePudding

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

.logo {
  width: 10%;
}

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

  <div >
    <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?

CodePudding user response：

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 500x500, it will render around 50px for the width (depending on the viewport).

.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 >
    <img src="https://dummyimage.com/500x500/000/fff&text=I'm Resizing" alt="Business logo"  />
  </div>

  <div >
    <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>

CodePudding user response：

There are a few ways that you can fix this problem. One is just not to use the CSS and use the width and height built into the image tag. here is an example of that.

<img src="img/Logo.png" alt="Business logo" width="100"/>

Another way it to give your image a class of logo

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