Maintain the proportion of the browser window when reducing its size

<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <img src="spacer--1200x800.png" width="1200" height="800" />
  </body>
</html>

This section contains CSS code:

body {
    background-image: url('b2.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    height: auto;
    width: 100%;
    margin:0px auto;
    overflow:hidden;
}

Be sure to review the above code. When the web browser is resized, the image adjusts proportionally, but there is an issue with the window height not resizing along with the image. To ensure no blank space appears, it's necessary for both the width and height of the window to resize automatically like the image.

javascripthtmlcss

Answer №1

It's generally not recommended to resize the browser window as it is frowned upon and may not be allowed in recent browser versions. Check out these notes on the restrictions that Firefox enforces.

If resizing the window is permitted, you could potentially use window.resizeTo with calculated parameters based on window.innerWidth, window.innerHeight, window.outerWidth, and window.outerHeight.

An example implementation might look like this:

window.onresize = function() {
    var targetInnerHeight = window.innerWidth * 800 / 1200;
    var heightDiff = window.outerHeight - window.innerHeight;
    var targetOuterHeight = targetInnerHeight + heightDiff;
    window.resizeTo(window.outerWidth, targetOuterHeight);
}

Nevertheless, remember that this action is usually discouraged. In most cases, browsers will prevent such manipulations for security reasons, and it's good practice to allow users to freely adjust their browser settings as they prefer.

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

Troubleshooting the issue of process.nextTick not being recognized in Calgolia places.js

After successfully implementing Algolia's places.js in my Angular 7 project using NPM, I encountered an issue. I have integrated a form where one of the fields should be an input. <form [formGroup]="myForm"> <pre style="color: white; b ...

javascriptangulartypescript

The justify-content: space-between property does not work in a nested flex box scenario

I'm currently working on styling a cart in Angular and facing an issue with aligning the price all the way to the right of the cart. I attempted using `space-between` within the outer div, which worked fine, but when applied to the inner div, it doesn ...

htmlcssangular

Guidelines for displaying user profile information in the dashboard page through an Angular project, considering the different user types (user, super user, admin)

In my application, I have implemented the dashboard feature. There are three types of dashboards: the regular user dashboard, super user dashboard, and admin dashboard. The super user and admin dashboards include additional tables along with the data from ...

htmlangulartypescripttwitter-bootstrapbootstrap-4

best way to sort through an array using jquery in javascript

Is there a way to filter a jQuery array like in SQL server with "Like % %"? var array=[ {"job_category":"hello sir","job_location":"hello dear"}, {"job_category":"dear kumar ","job_location":"sir"}, {"job_category":"testts ssss ss","job_location":"hello t ...

javascriptjqueryarrays

The controller in Angular uses the $scope symbol _

App.controller('todoController', function ($scope) { // create a message to display in our view $scope.todos = [{ name: 'angular', done: false }]; $scope.clearTodo = function () { $scope.todos = _.filter($scope.tod ...

javascriptangularjs

Check if any element from the first array exists in any nested array of the second array and return a Boolean

Having two distinct types of arrays, firstArrayObject = [{name: "sample", number: 23}, {name: "sample2", number: 25}]. The second object takes the form of secondObject = {someAttribute: bla, numbers: [23, 26, 27, 28} My goal is to det ...

javascriptsearchecmascript-6filter

Issue with mobile flipcard: Initial tap is unresponsive

Currently debugging the mobile version of a site built with Next.js. Encountering an issue where the first flip-card tapped on mobile refuses to flip properly. Instead, it selects the text on the opposite side of the card when tapped multiple times. The ...

cssmobiletransformnext.jstransition

When attempting to print certain attributes, the Node.JS array unexpectedly becomes undefined

While attempting to print a specific attribute such as "Full time or part time" in the getEmployeesByStatus() function, I encountered an issue where it suddenly returns undefined even though the entire array prints when I try to display it. This problem ha ...

javascriptarraysnode.js

How to retrieve the width of a document using jQuery?

Having a strange issue with determining the document width using $(document).width() during $(window).load and $(window).resize. The problem arises when the browser is initially full screen and then resized to a narrower width, causing content to require ...

javascriptjqueryhtmlcss

Displaying object properties within another object obtained from an API request in a React component

Dealing with API data can be tricky, especially when there are nested objects involved. I've encountered an error message stating 'undefined is not an object (evaluating 'coin.description.en')', as the description property of the c ...

javascriptreactjsnested-objectjsonobjectrequest

What causes a semiopaque background to show through in an adjacent div?

My webpage consists of three elements. The main element is centered with a beautiful background image, while overlayed on top of it is a second div with a black semi-transparent background to enhance text readability. In addition, there is a floating div ...

htmlcssalphargba

Discover and modify the values of all the keys within nested JSON arrays and objects using JavaScript

I have a nested JSON data structure consisting of arrays and objects. I am looking to convert all the key values from English to Spanish using JavaScript, NodeJS, or AngularJS. { "firstrootkey" : [ //Array of 6 objects { //1st object ...

javascriptangularjsjsonnode.jsnested

Guide to implementing a variable delay or sleep function in JQuery within a for loop

I've noticed that many people have asked similar questions, but none of the solutions provided seem to work in my specific case. My goal is to incorporate a delay within a for loop with varying time lengths. These time lengths are retrieved from an a ...

javascriptjqueryforeachsettimeout

There was a parsing error due to encountering an unexpected reserved word 'interface' in the code, as flagged

I'm encountering an issue with my code when trying to utilize Props. The error message I'm receiving is "Parsing error: Unexpected reserved word 'interface'. (3:0)eslint". This project is being developed using next with TypeScript. Er ...

javascriptreactjstypescriptnext.js

Using node.js to send custom data over a websocket

I came across an excellent tutorial on websockets. In this tutorial, the server decodes and writes a message to the console whenever it receives a message from the client. After that, the server sends the message back to the client. var firstByte = data ...

javascriptnode.jswebsocket

Trigger offcanvas modal and backdrop simultaneously using Bootstrap v5.0

Working with Bootstrap v5.0 offcanvas has been smooth sailing until I hit a roadblock. Clicking on the offcanvas button seems to be triggering both the offcanvas-backdrop and modal-backdrop divs simultaneously. <div class="modal-backdrop fade show ...

javascriptbootstrap-5

What is the process of extracting a URL and inputting it into a form to enhance

Can anyone help with extracting a specific value (TEXT) from a URL and automatically paste it into an input form field? For example, if the URL is domain.com/page?code=123abc, I need to grab the code (in this case, 123abc) and have it automatically popula ...

javascripthtml

Placing the word "repeatedly" in a d3 js tree

I am currently working on building a tree structure and incorporating edge labels. The tree allows nodes to be dynamically added using a plus button that appears when you click on a parent node. One issue arises when adding a new child. (apologies for the ...

javascriptd3.js

What is the best way to transform this into an HTML readable code?

While browsing through a template, I came across this code and I'm unsure of how to get it functioning. I've tried removing the comments, but unfortunately it doesn't seem to be working as expected. li.dropdown.navbar-cart ...

javascriptphpjqueryhtmlcss

JavaScript script to modify the parameter 'top' upon clicking

Here is the pen I've made. HTML <div class = 'cc'> <div class = 'bb'><div class = 'aa'> Some word </div></div> </div> CSS .cc { width: 100%; min-height: 90px; margin: 0; ...

javascripthtmlcss