Html - Shrink images to fit into nav

Kat
April 22, 2024
98 views
1 vote
2 Answers

I’m trying to fit 3 images into a navigation bar, but I have the intelligence of a salamander and is having some trouble.

@font-face {
    font-family: 'miauzers';
    src: url('miauzars.ttf')  format('truetype');
    }
    
#tophead {
  font-family: 'miauzers'; 
  width: 100%; 
  text-align: center;
}

nav {
  max-width: 100%;
  height: auto;
  display: flex;
}

img {
  max-width: 100%;
}

<nav> 

  <a href="profile.html" >
    <img src="https://porcelainbed.neocities.org/profpage.png" alt="a person's face split down the middle. profile page." id="profileimg" width="auto">
  </a>

  <a href="#bottom">
    <img src="https://porcelainbed.neocities.org/botp.png" alt="a spiral arrow pointing downwards. bottom of the page."  id="bottomimg" width="auto">
  </a> 

  <a href="art.html">
    <img src="https://porcelainbed.neocities.org/artpage.png" alt="a cat leaping, tree in the background. art page."  id="artimg" width="auto">
  </a>

</nav>

anything helps

I’ve tried a couple things, mainly adjusting where max-width was in the css and failing miserably, and even manually putting style= in the images and nav bar to see what changes. Essentially the results should be all three images equally shrinking to fit within the nav bar, like one by one by one and then growing or shrinking depending on the screen size.

Tags: css html

Answers

I think you could be looking for view port increments. I am assuming you are wishing to keep the height relative, yes? Try using vw for your width. If the example is not what you are looking for let me know and I can change or remove the answer.

More on CSS Relative length units can be found here.

@font-face {
    font-family: 'miauzers';
    src: url('miauzars.ttf')  format('truetype');
    }
    
#tophead {
  font-family: 'miauzers'; 
  width: 100%; 
  text-align: center;
}

nav {
  max-width: 100%;
  height: auto;
  display: flex;
}

img {
  max-width: 32vw;
  height: auto;
}

<nav> 

  <a href="profile.html" >
    <img src="https://porcelainbed.neocities.org/profpage.png" alt="a person's face split down the middle. profile page." id="profileimg" width="auto">
  </a>

  <a href="#bottom">
    <img src="https://porcelainbed.neocities.org/botp.png" alt="a spiral arrow pointing downwards. bottom of the page."  id="bottomimg" width="auto">
  </a> 

  <a href="art.html">
    <img src="https://porcelainbed.neocities.org/artpage.png" alt="a cat leaping, tree in the background. art page."  id="artimg" width="auto">
  </a>

</nav>

You could try to add flex: 1 to each of the items so they will shrink/grow equally to fit the nav

@font-face {
  font-family: 'miauzers';
  src: url('miauzars.ttf') format('truetype');
}

#tophead {
  font-family: 'miauzers';
  width: 100%;
  text-align: center;
}

nav {
  max-width: 100%;
  height: auto;
  display: flex;
}

/** Add flex: 1 **/
a {
  flex: 1;
}

img {
  max-width: 100%;
}

<nav>

  <a href="profile.html">
    <img src="https://porcelainbed.neocities.org/profpage.png" alt="a person's face split down the middle. profile page." id="profileimg" width="auto">
  </a>

  <a href="#bottom">
    <img src="https://porcelainbed.neocities.org/botp.png" alt="a spiral arrow pointing downwards. bottom of the page." id="bottomimg" width="auto">
  </a>

  <a href="art.html">
    <img src="https://porcelainbed.neocities.org/artpage.png" alt="a cat leaping, tree in the background. art page." id="artimg" width="auto">
  </a>

</nav>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Shrink images to fit into nav

Answers