The issue with CSS height percentage failing to scale an image

I need help creating the top part of a website that will display a logo on the left and a navigation bar on the right. I have a large image for the logo as it may be used on an HDTV and needs to scale well. I tried putting the logo and nav bar in the same div and setting the height to 10% so it would always be at the top of the screen, but it's not scaling correctly. Any assistance would be greatly appreciated.

<body>
<div id="container">
    <div id="top">
    <img src="images/logo.png" alt="logo">
    <ul>
    <li><a href="#" title="1">1</a></li>
    <li><a href="#" title="2">2</a></li>
    <li><a href="#" title="3">3</a></li>
    <li><a href="#" title="4">4</a></li>
    <li><a href="#" title="5">5</a></li>
    </ul>
    </div>
</div>

This is my CSS code:

#top {
height: 10%;
width: 100%
}

Your help would be much appreciated.

css

Answer №1

To resize the image itself, make sure to target the image in your CSS.

It's also a good idea to set limits for scaling, both minimum and possibly maximum. Too much resizing can make the image look distorted and impractical.

html, body, #container {
    height: 100%;
    width: 100%;
}

#top {
    height: 10%;
    width: 100%;
    min-height: 23px;
}

#top img {
    height: 100%;
    width: auto;
    min-height: 23px;
    min-width: 136px;
}

Check out this jsfiddle example

Answer №2

To ensure the image scales properly with the div, set its height to 10%. This adjustment should make it work as intended.

#top img {
    height: 10%;
}

For a live example, check out this jsFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the Navbar to be Aligned Completely to the Left and Divide it into 12

I need my navbar to be split into 12 sections so that each item occupies one section, starting from the far left of the screen. The current alignment doesn't meet this requirement as shown in the image below; https://i.sstatic.net/irYqV.png Despite ...

htmlcsstwitter-bootstrap

Guide on duplicating an HTML element's markup and style completely

Looking for a Chrome tool that can extract both the HTML and relevant CSS code of an element along with its child elements. Any suggestions? ...

htmlcssweb-inspector

The styled component is not reflecting the specified theme

I have a suspicion that the CSS transition from my Theme is not being applied to a styled component wrapped in another function, but I can't pinpoint the exact reason. I obtained the Basic MUI Dashboard theme from this source and here. Initially, inte ...

cssreactjstypescriptmaterial-ui

Manipulate a 3D shape by transforming both the x and y axes using jQuery's mousemove

I am trying to create a 3D element that rotates on both the x and y axes based on the position of the mouse on the screen. While I have successfully achieved this effect using either the X or Y position, I am struggling to make it work simultaneously for b ...

jquerycssmousemove

HTML formatting for text

I recently created an HTML website using Dreamweaver. I faced an issue while trying to design a section within an article using tables to incorporate both text and images. Unfortunately, the tables did not have rounded edges as I desired. I am reaching out ...

htmlcsshtml-tableformatting

Exploring ways to update the design of my navigation bar when clicked by utilizing hooks to dynamically incorporate a new className

Can someone help me understand how to change the styling of my hamburger icon when it's clicked? I'm trying to add a new className to it using hooks and then target that class in Sass. The className is being added correctly, but the new styles ar ...

javascriptcssreactjssass

Arranging Elements in a Vertical Stack Using Bootstrap

I'm currently working with bootstrap to arrange a series of cards side by side, but I'm facing an issue where the cards end up stacking on top of each other instead of aligning horizontally. <div class="container"> <div class="row"& ...

javascripthtmlcssbootstrap-4positioning

Center align a row with the help of Bootstrap 4.0

Here is some code with Bootstrap 4 classes that I am working with: <div class="container"> <div class="row"> <div class="col-xl-4 col-md-6 col-lg-4"> <div class="footer_widget"> <h3 class ...

csstwitter-bootstrapbootstrap-4

The height of the div is set to zero within the $(document).ready() function

From what I understand, when we write JQuery code inside $(document).ready(), the code will only be executed after the DOM has finished rendering. I encountered an issue where I was trying to calculate the height of a div inside $(document).ready() but it ...

javascriptjqueryhtmlcssangularjs

Emphasize the current page's menu item for the user viewing it

I'm looking for a way to visually emphasize the current menu item so that users can easily identify the page they are currently on. This could be achieved through bolding or underlining, whichever works best. I'm hoping to accomplish this using o ...

csswordpress

Tall Chakra UI component reaching full height

Is there a way to make my App component use the full height of the screen? I attempted setting the body tag height to 100% in my index.html file, but it did not have the desired effect. ...

cssreactjschakra-ui

Setting up the file structure for customizing Bootstrap with Sass

Hello, I am currently setting up Bootstrap for customization using Sass. After creating an HTML page, I attempted to add my own custom properties to the custom.scss file. Unfortunately, these changes do not seem to affect my page as expected. I followed s ...

htmlcsssassbootstrap-5

Disabled button in Bootstrap4 displaying the wrong color as white instead of the intended color

On one of my pages, I have a bootstrap button that is disabled but the styling doesn't seem to be working correctly. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.mi ...

cssbootstrap-4

Having trouble with modifying Bootstrap Sass variables when importing specific Bootstrap components?

I am facing a challenge in grasping the concept of overriding or adding default variables without importing the entire Bootstrap library. The documentation for Bootstrap suggests two options: either importing everything or just the specific parts you requi ...

csssassbootstrap-5

Custom stylesheet for individual users?

On my website, users can pick a template for their webpage. After selecting a template, I would like them to have the ability to customize certain styles like the font color. Is there a way to achieve this? I was thinking about saving the user's cus ...

htmlcssasp-classic

Position a div in the center and add a right menu to it

Looking to centralize a main div and add a fixed menu to the right side of it. The goal is for the main div to remain centered while the right menu "sticks" to the center div. At the moment, I've used flex to center the div, but it has resulted in bo ...

javascripthtmlcssreactjs

How to Use CSS to Align an Image in a Header

I'm struggling to position an image on the top right corner of my page, specifically in the header. Despite searching for help on Stack Overflow and other online resources, I can't seem to figure it out. Currently, here is what I have: https://i ...

htmlcss

The HTML body is given a right margin for proper spacing

Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...

htmlcsstwitter-bootstrapbootstrap-5

Maintain the fixed position of the horizontal scroll bar

I'm facing an issue with a popup window that displays a frameset. Within one of the frames, I'm using jQuery tabs to show some text. The problem arises when trying to display long text or when resizing the window, causing the horizontal scroll t ...

jqueryhtmlcsspopupwindowjquery-tabs

Alpinejs Mega Menu Issue: Hover Functionality Glitchy

I'm working on a complex Mega Menu project that is activated upon hovering, using the powerful combination of Tailwind CSS and Alpinejs. The functionality is mostly there, but I've encountered some bugs along the way. Despite my attempts to impl ...

javascriptcssmenumegamenualpine.js