CODEWITHSUNDEEP
htmlcssimageweb
Johnny Robertson
Johnny Robertson

Reputation: 147

Why is my logo not scaling/resizing html/css?

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: #000;
}

.logo {
  max-width: 80%;
  width: 20%;
  height: 20%;
}

.navbar {
  padding: 20px;
  height: 50vh;
}

.navbar,
ul {
  display: flex;
  flex-direction: row;
}

ul li {
  padding: 0 5px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
<nav class="navbar">
  <a href="#" class="logo"><img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a>
  <div class="wrapper">
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
    </ul>
    <ul class="ul2">
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </div>
</nav>

What I tried was directly scaling my logo with my class of logo but it doesn't seem to work.

Here's my output:

enter image description here

(It's cut off, but the picture continues to show a door down the page).

Wondering how to make it so it does this:

enter image description here

Ignore the misalignment and spacing problems, that's just my quick screenshot recreation.

I also tried putting display: in-line block in my .logo{} but it doesn't do anything.

How can I rescale and position my logo to be in line with everything else?

Upvotes: 0

Views: 2058

Answers (3)

kernelrpc_mach_vm_protect
kernelrpc_mach_vm_protect

Reputation: 1

You must define the class on the img tag. <img class="logo" src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a> also it is good practice to include text in the alt.

Upvotes: 0

user1488631
user1488631

Reputation: 11

Place the class="logo" on the image element.

Example line to change:

<img class="logo" src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a>

Upvotes: 1

disinfor
disinfor

Reputation: 11533

It's because the img is not being given a width or height. The img element doesn't care that the logo element has a width and height, it will scale to its native width/height, unless you tell it not to.

I set the img to have a width of 100%, which means, "100% of its container". I set the height to auto so it doesn't distort.

That said, you should probably crop and resize the actual image to the largest it will ever be - so you're not loading a huge image for something small.

.logo img {
   width: 100%;
   height: auto;
   display: block;
}


* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: #000;
}

.logo {
  max-width: 80%;
  width: 20%;
  height: 20%;
}

.logo img {
width: 100%;
height: auto;
display: block;
}

.navbar {
  padding: 20px;
  height: 50vh;
}

.navbar,
ul {
  display: flex;
  flex-direction: row;
}

ul li {
  padding: 0 5px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
<nav class="navbar">
  <a href="#" class="logo"><img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a>
  <div class="wrapper">
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
    </ul>
    <ul class="ul2">
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 3

Related Questions