When implementing the "box-sizing: border-box" reset, the layout may become distorted if the image height is specified in percentage

I am facing an issue with my header containing a logo when I apply the box-sizing: border-box reset.

Here is the functional header: 

.header-container {
  height: 60px;
  width: 100%;
  background-color: #333333;
  color: white;
  display: flex;
  justify-content: space-between;
}

.app-logo {
  height: 30px;
  padding: 15px 20px;
}

.app-logo img {
  height: 100%
}
<div class="header-container">
  <div class="app-logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Flag_of_Montenegro_%281993-2004%29.png">
  </div>
</div>

Now, here is the problematic one:

html {
  box-sizing: border-box
}

*, *:before, *:after {
  box-sizing: inherit
}

.header-container {
  height: 60px;
  width: 100%;
  background-color: #333333;
  color: white;
  display: flex;
  justify-content: space-between;
}

.app-logo {
  height: 30px;
  padding: 15px 20px;
}

.app-logo img {
  height: 100%
}
<div class="header-container">
  <div class="app-logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Flag_of_Montenegro_%281993-2004%29.png">
  </div>
</div>

Why does the image inside .app-logo disappear when box-sizing is applied?

I attempted to change the height of .app-logo img {height: 30px;} in pixels, which made the image visible again. However, I would prefer to keep it at 100% so that the logo's height adjusts to its container.

htmlcss

Answer №1

When using box-sizing: border-box, the padding is included in the size calculation of elements. For example:

.app-logo {
  height: 30px;
  padding: 15px 20px;
}

In this case, the top and bottom paddings are both 15px. So, the total height of the element becomes 30px, leaving no room for content.

To address this issue, you can replace the padding: 15px 20px; in the .header-container with the following CSS:

html {
  box-sizing: border-box
}

*, *:before, *:after {
  box-sizing: inherit
}

.header-container {
  height: 60px;
  width: 100%;
  background-color: #333333;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
}

.app-logo {
  height: 30px;  
}

.app-logo img {
  height: 100%
}
<div class="header-container">
  <div class="app-logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Flag_of_Montenegro_%281993-2004%29.png">
  </div>
</div>

Answer №2

the image is being overlapped by the parent's padding, as shown in the snippet below.

setting height: 100% resolves the issue

html {
  box-sizing: border-box
}

*, *:before, *:after {
  box-sizing: inherit
}

.header-container {
  height: 60px;
  width: 100%;
  background-color: #333333;
  color: white;
  display: flex;
  justify-content: space-between;
}

.app-logo {
  height: 30px;
  /*padding: 15px 20px; this bit of padding takes all the space*/ 
}

.app-logo img {
 height: 100%;
}
<div class="header-container">
  <div class="app-logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Flag_of_Montenegro_%281993-2004%29.png">
  </div>
</div>

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

Prioritize the Menu display

Is there a way to bring the menu's black background in front of the body text in the image below? Here is the JSFiddle link for reference: https://jsfiddle.net/johnking/j58cubux/6/ The issue occurs when scrolling down and the menu is not clearly vi ...

htmlcss

What is the technique for linking to a different WordPress PHP file using a href?

I have a question regarding working with WordPress. I am using Stacks, a blank theme to convert an HTML template to WordPress. I need to create a hyperlink or button on a landing page that redirects to another PHP file within my website directory (e.g., lo ...

phphtmlcsswordpresswordpress-theming

Blazor Shared CSS File

Currently, I have successfully implemented 2 pages in my Blazor app: Login.razor located in the Auth folder AddPerson.razor situated in the Profile directory At this point, I have managed to integrate a CSS file specifically for the AddPerson.razor page ...

c#cssblazor

Retrieve data from TypeScript file (.ts) and use it in an HTML document

Recently I started learning Typescript and HTML as I work on building an Angular2 application. At the moment, I have a TypeScript file that resembles the following structure: import {Http, Headers} from 'angular2/http'; import {Component} from & ...

javascripthtmltypescriptangular

Images displayed alongside webpage contents

I'm having trouble getting these photos to display in the same row. Any suggestions on what I should change? https://i.stack.imgur.com/EbvmR.png I've attempted using float left and other commands, but one picture continues to stay in the lower r ...

javascripthtmljquerycssbootstrap-4

Modify background image upon hovering using AngularJS

I cannot seem to make the background images of my divs change. Despite trying various options, none of them have been successful. Here's an example of my code: <div ng-controller="mainController" class="main"> <div ng-repeat="land in lan ...

javascripthtmlangularjs

AngularJS seems to be ignoring CSS styles when displaying list items in the ng-repeat loop

After coming across a tutorial on creating round circles connected by a line in CSS, I decided to implement it myself. Interestingly, everything worked perfectly fine when I tested it with static HTML. However, when I tried to make it dynamic using Angular ...

javascripthtmlangularjscsstemplates

Create collapsible horizontal submenus in Bootstrap for mobile devices

I created a modal specifically for mobile users that displays when they access the site. It features various categories and nested menus for easy navigation. <!-- Modal --> <div class="modal fade" id="exampleModalCenter" t ...

htmltwitter-bootstrapbootstrap-5

Is it possible to create Android apps using HTML and JavaScript?

I have a strong foundation in HTML, Javascript, CSS, and AJAX, but I want to venture into Android application development. However, I lack knowledge of Java technology. Is it feasible to develop Android apps using HTML or JS? If anyone has experience wit ...

javascriptandroidhtml

Encountering issues with integrating an external plugin with AngularJS code

For my app, I am attempting to incorporate intercom for monitoring user activity. It functions correctly when placed inside a script tag in index.html. However, I encounter an error when trying to use it in a .ts file as shown below: app/components/rocket/ ...

javascriptjquerycssangularintercom

To retrieve the first td element by clicking a button within the corresponding row using JQuery

This may seem like a straightforward inquiry, but despite my best efforts, I have been unable to find a solution. I am looking to create a function that will allow me to click a button located in the 3rd td element and display the text from the first td e ...

javascriptjqueryhtml

Trouble with importing scss file in sass and bootstrap collaboration

I am using Sass with Bootstrap 4, and now I'm facing an issue in my Sass folder where I have an app.scss file that includes: @import _customVariables.scss @import node_modules/bootstrap/scss/functions @import node_modules/bootstrap/scss/mixins Howev ...

csssassbootstrap-4

Determine the placement of a <div> based on information stored in localStorage

I'm diving into the world of localStorage and trying to figure out how it works. To get a better understanding, I decided to create an HTML page that allows users to drag and drop tiles around the screen. Here's a snippet of the code I came up ...

javascriptcsshtml

Preventing JavaScript from refreshing the page when using location.replace for the second time with the identical URL

I've encountered an issue while using location.replace to reload a page that relies on GET variables for displaying a success message. The problem arises when the URL specified in the location.replace call is identical to the current one, causing the ...

phpjavascriptjqueryhtmlajax

Is it better to dynamically generate HTML elements or to just directly paste complete fragments in the code?

After manipulating the DOM and injecting AJAX content, I often find myself filling in the new content into a copied HTML fragment, then populating it with the updated information before using $().html() to insert the modified code back into the DOM. The ex ...

javascripthtmlajaxdom

Is there a way to store image URLs in a fashionable manner?

Hey there! I've been working on creating a HTML page that showcases multiple images. Everything is running smoothly on my localhost, but when I try to access it online, the images take forever to load. Any suggestions on how I can cache image URLs in ...

javascriptjqueryhtmlcss

When I try to upload an image onto my website, the layout of my text gets disrupted

There seems to be quite a gap between the welcoming message and the main body text. Significant spacing noticed between Title and body ...

javascripthtmlcss

how to edit a hyperlink tag within an HTML comment using Java

I am dealing with html content that contains a lot of comments. Within the comments, there are anchor tags present, and I need to replace the anchor starting tag with ^^. **original content** <html> <body> <!-- somthing text <a hre ...

javahtml

Creating tilted divs with dynamic height to perfectly fit the content

I'm struggling to incorporate this design into my webpage; I can't seem to get the right div's height to match the left div as depicted in the second image. Can someone offer some assistance? Additionally, when viewed on mobile, the squares ...

htmlcssbootstrap-4

utilizing tabview for component replacement

Having trouble changing components in Angular 7 with PrimeNG tabview tabs? Need some assistance? I have a setup with 3 components, and I want to switch between them when clicking on the panel inside the tabview. I've tried using onchange functions i ...

htmlangulartypescriptprimeng