Adjust sensor - CSS div size scaling based on proportions

I am working on a flexbox layout with three horizontal columns that I want to occupy the full size of the window without any scrollbars.

In the middle column, there is a div that will display an A4 page. The dimensions should always remain proportionate, adjusting dynamically when the browser window is resized.

The content within the div also needs to be scaled down to match the parent container size. This includes text and images that need to resize accordingly.

My initial attempt was to use the following CSS:

A4-Portrait {width: auto; height: auto; max-width: 595.296px; max-height: 841.896px;}

However, this approach did not scale the div proportionally or resize its contents, only adjusting the width and height to fit the space.

To demonstrate the issue, I have provided a simple code snippet:

body 
{
  padding: 0em;
  margin: 0em;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: arial;
  box-sizing: border-box;
}

header, main, footer 
{
  padding: 1em;
  flex: 1;
}

header, footer
{
  background-color: #999;
}

main 
{
  flex: 2;
  background-color: grey;
}

page 
{
  padding: 1em;
  background: white;
  display: block;
}

.A4-Portrait 
{
  width: 595.296px;
  height: 841.896px;
}
<header>[header]</header>

<main>
  <page id="pageSize" class="A4-Portrait">
      [page]
  </page>
  
</main>

<footer>[footer]</footer>

UPDATE: Since I couldn't find a pure CSS solution, I turned to 'Fit.js' for help.

By including the Fit.js file and adding the following code, I was able to implement it successfully. The A4 page size in pixels remained unchanged, and the JavaScript calculated the maximum dimensions based on the parent DIV. It also monitored user browser resizing.

// get element references
var foo = document.querySelector('main');
var bar = document.querySelector('#pageSize');
// fit bar into foo
// the third options argument is optional, see the README for defaults
// https://github.com/soulwire/fit.js
var watching = fit(bar, foo, {

    // Alignment
    hAlign: fit.CENTER, // or fit.LEFT, fit.RIGHT
    vAlign: fit.CENTER, // or fit.TOP, fit.BOTTOM

    // Fit within the area or fill it all (true)
    cover: false,

    // Fit again automatically on window resize
    watch: true,

    // Apply computed transformations (true) or just
    // return the transformation definition (false)
    apply: true
});

Answer №1

By using the vw unit for sizing, you can ensure that everything scales proportionally with the width of the screen. It seems like this is what you were aiming for.

To establish the dimensions of the page, I based it on the ratio of an A4 page, which is 1:1.414. I set the width visually and then calculated the height using the width multiplied by 1.414.

Adjusting font sizes can be a bit trial and error, but tools like this online calculator might help guide you in setting responsive font-sizes:

body 
{
  padding: 0em;
  margin: 0em;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: arial;
  box-sizing: border-box;
}

header, main, footer 
{
  padding: 1em;flex: 1;
}

header, footer
{
  background-color: #999;
}

main 
{
  flex: 2;
  background-color: grey;
}

page 
{
  padding: 1em;
  background: white;
  display: block;
}

.A4-Portrait 
{
  width: 80vw;
  height: calc(1.414 * 80vw);
  margin: 0 auto;
}
 
.page-header {
  font-size: 5vw;
}
   
.page-body {
  font-size: 3vw;
}
<header>[header]</header>

<main>
  <page id="pageSize" class="A4-Portrait">
      <h1 class="page-header">Page header</h1>
      <p class="page-body">Page text page text page text</p>
  </page>
  
</main>

<footer>[footer]</footer>

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

concealing the upper header while scrolling and shifting the primary header upwards

Is there a way to use CSS to move the main header navigation, including the logo and links, on my website up when scrolling down in order to hide the top black bar header that contains contact information? The website in question is atm.truenorthmediasol ...

What is the best way to choose the nearest element using the initial part of a class name?

I am working on a section of a table and need to hide a specific part when an icon is clicked. Below is the code snippet: <tr class="getmoreinfo_19"> <td>&nbsp;</td> <td colspan="3"> <div c ...

Double Pop-up Issue with IE 11 - Two Consecutive Leave or Stay on this Page Prompts

This issue is specific to Internet Explorer. I have a webpage that contains a Close button. When the Close button is clicked with any unsaved changes on the page, a "Leave or stay on this page" popup appears. Clicking the Leave button functions as expected ...

Recalling the position of the uploaded image within a v-for loop

I am struggling to solve this issue. Currently, I am utilizing Vue.js in an attempt to construct a dashboard where users can upload up to five images of visitors who are authorized to access a specific service provided by the user. Below is the code snip ...

What is the best way to enlarge a navbar from the top using Bootstrap 5?

I have a button labeled "MENU" at the top and a logo image below it. Currently, the menu expands from the bottom of the button. I would like it to expand from the top instead, and when the menu is expanded, the button should be under the navigation list, n ...

designing a dropdown menu in HTML

I'm attempting to customize the icon for an HTML select menu using fontawesome icon fonts. My current code looks like this: <select> <option value="1">1</option> <option value="2">2</option> <option value= ...

The loading indicator is not appearing inside the designated box

I have successfully implemented a loader using jQuery and CSS to display a gray background during an AJAX call. However, I am encountering an issue where the loader and background are being displayed across the entire page instead of just within a specific ...

Stop Bootstrap 4 from automatically wrapping columns to the next row

I'm experiencing an issue with a component using Bootstrap 4 where a column is expanding to another row due to the presence of a long text element with the "text-truncate" class. This results in Chrome vertically stacking the column below its intended ...

Utilizing CSS for displaying and hiding content based on its unique identifier

Is it possible to show/hide a div using only CSS based on its ID? Showcasing this functionality in jQuery or vanilla JavaScript is straightforward, but can the same effect be achieved with pure CSS? The checkbox hack requires a specific structure to func ...

The inclusion of individual CSS files in a TypeScript React project does not have any effect

My issue involves creating a new react project with typescript and adding a custom component with a separate CSS file for styling. The folder structure is as follows: https://i.sstatic.net/UNtEP.png In the Header.css file, I have defined a class: .mainHe ...

Inappropriate functionality of jQuery Code

Take a look at Demo Gallery I'm encountering some bugs that I can't seem to resolve. In Safari, there's a flickering issue when hovering over other elements In Safari and Chrome, the images are not displaying at the correct size (270x128) ...

Scrolling vertically on android using Phonegap

Currently, I am working with a dynamic list on PhoneGap. Is there a way to implement a vertical scroller for a basic ul and li list? I attempted applying overflow:auto to the div, but even though the scroller is visible, it does not work as expected. I p ...

Placeholder image for content background

Is it possible to set a background image specifically for a content placeholder? Currently, I can display a background image for the entire page, but the content placeholder covers most of the picture. I would like to set a background image for the content ...

JavaScript | Determining the coordinates of where on the image X and Y were clicked

My goal is to determine the position of an x and y location when a user clicks on an image. This information will be used to add a spot to the image that displays relevant information. The content for the spot will be dynamically loaded from a SQL database ...

Triggering an automatic pop-up window using JavaScript based on a PHP condition

I have developed a hidden pop-up box that becomes visible when targeted, with its opacity increasing to one. I am aiming for the pop-up to appear if the user is identified as a "firstTimeUser," a status saved in a PHP $_SESSION variable. However, I am stru ...

What sets apart the intended usage of the DOM `hidden` from the CSS `visibility` property?

Exploring the DOM property hidden and the CSS property visibility, I find myself unsure of when to utilize each one. What are the distinctions in their intended purposes? While they may serve similar functions, I am curious about the underlying motivation ...

No matter how much I try, the text refuses to align with the top-left corner

I have been working on creating a loading screen, but I am facing an issue with aligning the h1 tag selected to the top left. As a young developer at the age of 13, I am quite confused. I attempted to use the following CSS properties: vertical-align: top; ...

What is causing the failure of the requestQuota call in this filesystem api?

Currently, I am developing an HTML5 application intended to be run on Chrome from the local filesystem. Whenever I attempt to access the filesystem, an error is thrown, possibly due to it being a local file. Is there any way to configure Chrome to allow th ...

Freshly updated, discover how to create an underlined navbar menu item

I'm trying to underline the currently selected menu item in a navbar, but I'm having trouble getting it to work. Here's my code: .navbar-nav .nav-item:focus .nav-link { text-decoration: underline; background-color: yellow; } It&apo ...

How to centrally align an image with HTML tags <p></p>

https://i.sstatic.net/iTBOI.jpg I need help with HTML alignment for my website How can I center align the text with the image? #main__img { text-align: center; height: 80%; width: 80%; } .main__content p { margin-top: 1rem; font-s ...