Image in CSS-Class resizing

Admin 1
Viewed 145

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?

flexbox css image html
2 Answers

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" class="logo" />
user_145791560

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

user_164963570
Related