Image header displaying super small (105×24) with Angular CLI


I’m in a SAAS class and we’re building a website with Bootstrap and Angular. This is my first time using Angular Cli and I’m having an issue with my website header. When I ran things statically before setting up the Angular components the header image displayed fine, but now it’s rendering super tiny when I launch it using the Angular ng serve command. I’ve tried forcing the image to use 100% width and 100% height just to see if it would work. I’ve also tried putting the header in app.component.html but the same issue occurs. The header image itself is 2048×649. I feel like there’s something silly that I’m missing but I can’t figure it out.

header.component.html

<header>
  <!-- nav bar & header -->
  <nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand navlogo" href="#">Space Place</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0 pe-2 pt-1">
          <li class="nav-item">
            <a href="#" class="nav-link active">
              Home
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Account
            </a>
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
              <li><a class="dropdown-item navitems" href="#">Calendar</a></li>
              <li><a class="dropdown-item navitems" href="#">Image Upload</a></li>
              <li><a class="dropdown-item navitems" href="#">Weather</a></li>
              <li><a class="dropdown-item navitems" href="#">Settings</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              Image Gallery
            </a>
          </li>
          <li class="nav-item">
            <a href="signin/" class="nav-link" id="signInLink" data-bs-toggle="modal" data-bs-target="#signInModal">
              Sign in
            </a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-light my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

  <!-- problem image -->
  <img src="/images/orion.png" class="img-fluid" alt="orion nebula">
</header>

styles.css

/* Global styles */

.bgcolor.scrolled 
  background-color: black;


.navlogo 
  font-family: 'Roboto Flex', sans-serif;
  font-size: 3vw;
  font-max-size: 50px !important;
  color: white;

.searchNav 
  margin-right: 1em;
  margin-left: 1em;


.navbar-collapse 
  margin-left: 1.5em;

.navbar-brand 
  font-family: 'Roboto Flex', sans-serif;
  font-size: 3vw !important;
  color: white;
  margin-left: 1em;


#navbarNav 
  text-align: end !important;


.navbar-nav .active 
  text-decoration: underline;


.navitems 
  font-family: 'Roboto Flex', sans-serif;
  align-content: end;


.navbar-toggler-icon 
  align-self: end;


.navbar-toggler 
  border: transparent;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;

.mainWebsiteFont 
  font-family: 'Roboto Flex', sans-serif;
  font-size: medium;


.upcomingEventsTitle 
  font-family: 'Roboto Flex', sans-serif;
  text-decoration: underline;
  font-size: x-large;
  font-weight: bold;
  color: black !important;


.skyGuideTitle 
  font-family: 'Roboto Flex', sans-serif;
  text-decoration: underline;
  font-size: x-large;
  font-weight: bold;
  color: black !important;


.input-group 
  max-width: 216px;


.content-container 
  border-top:3px solid #874670;
  border-left: 3px solid #874670;
  border-right: 7px solid #874670;
  border-bottom: 7px solid #874670;
  border-radius: 25px;


.gradient-custom 
  /* fallback for old browsers */
  background: #6a11cb;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))



Source link

Leave a Reply

Your email address will not be published.

Previous Article

Skullcandy’s Mod earbuds cost $60 and have a 34-hour battery life

Next Article

Fluorescence Measurement Approach Speeds Process, Quality Control

Related Posts