Adaptable positioning determined by screen and window width exclusively

Question

Adaptable positioning determined by screen and window width exclusively

After searching through numerous resolved dynamic positioning questions, I have not found any solutions that are helpful to my situation. Here is a description of the page...

+-----------------------------------------------------------------------+
| +-----------+ +------------------+ +------------------+ +-----------+ |
| |   IMG 1   | |                  | |                  | |   IMG 4   | |
| | width:20% | | IMG 2, width:30% | | IMG 3, width:30% | | width:20% | |
| |  aspect   | | aspect ratio 4:3 | | aspect ratio 4:3 | |  aspect   | |
| |  ratio    | |                  | |                  | |  ratio    | |
| |   3:4     | +------------------+ +------------------+ |   3:4     | |
| |           |                                           |           | |
| +-----------+                                           +-----------+ |
| +-----------+                                           +-----------+ |
| |   IMG 5   |                                           |   IMG 6   | |
| | width:20% |                                           | width:20% | |
| |  aspect   |                                           |  aspect   | |
| |  ratio    |                                           |  ratio    | |
| |   3:4     |                                           |   3:4     | |
| |           |                                           |           | |
| +-----------+                                           +-----------+ |
| +-----------+                                           +-----------+ |
| |   IMG 7   |                                           |   IMG 8   | |
| | width:20% |                                           | width:20% | |
| |  aspect   |                                           |  aspect   | |
| |  ratio    |                                           |  ratio    | |
| |   3:4     |                                           |   3:4     | |
| |           |                                           |           | |
| +-----------+                                           +-----------+ |
+-----------------------------------------------------------------------+

(1) My aim is for the images to adjust in size based on the window width only. If the user resizes the window vertically, I do not want the images resized. (2) Additionally, I would like this resizing to continue until the window reaches 50% of the screen width, at which point they will remain constant in size. For example, IMG 1's width should stay at 10% of the screen width.

I can achieve (1) for the top row. The challenge lies with IMGs 5-8 as the 'top' value is calculated using the window height.

Is there a way I can dynamically accomplish what I need? I am unable to use calc() since it determines the result for the top position based on window height. Moreover, there seems to be no CSS property for screen width and JavaScript does not handle dynamic resizing.

Any assistance provided would be greatly appreciated. (additional images below may help clarify my request)

magic²

Full Screen

+-----------------------------------------------------------------------+
| +-----------+ +------------------+ +------------------+ +-----------+ |
| |   IMG 1   | |                  | |                  | |   IMG 4   | |
| | width:20% | | IMG 2, width:30% | | IMG 3, width:30% | | width:20% | |
| |  aspect   | | aspect ratio 4:3 | | aspect ratio 4:3 | |  aspect   | |
| |  ratio    | |                  | |                  | |  ratio    | |
| |   3:4     | +------------------+ +------------------+ |   3:4     | |
| |           |                                           |           | |
| +-----------+                                           +-----------+ |
| +-----------+                                           +-----------+ |
| |   IMG 5   |                                           |   IMG 6   | |
| | width:20% |                                           | width:20% | |
| |  aspect   |                                           |  aspect   | |
| |  ratio    |                                           |  ratio    | |
| |   3:4     |                                           |   3:4     | |
| |           |                                           |           | |
| +-----------+                                           +-----------+ |
| +-----------+                                           +-----------+ |
| |   IMG 7   |                                           |   IMG 8   | |
| | width:20% |                                           | width:20% | |
| |  aspect   |                                           |  aspect   | |
| |  ratio    |                                           |  ratio    | |
| |   3:4     |                                           |   3:4     | |
| |           |                                           |           | |
| +-----------+                                           +-----------+ |
+-----------------------------------------------------------------------+

width: 50% height:100%

+-------------------------------------------+
| +------+ +---------+ +---------+ +------+ |
| |IMG 1 | |  IMG 2  | |  IMG 3  | |IMG 4 | |
| |      | |         | |         | |      | |
| |      | +---------+ +---------+ |      | |
| +------+                         +------+ |
| +------+                         +------+ |
| |IMG 5 |                         |IMG 6 | |
| |      |                         |      | |
| |      |                         |      | |
| +------+                         +------+ |
| +------+                         +------+ |
| |IMG 7 |                         |IMG 8 | |
| |      |                         |      | |
| |      |                         |      | |
| +------+                         +------+ |
|                                           |
|                                           |
|                                           |
|                                           |
|                                           |
|                                           |
|                                           |
|                                           |
|                                           |
+-------------------------------------------+

width: 50% height: 50%

+-------------------------------------------+
| +------+ +---------+ +---------+ +------+ |
| |IMG 1 | |  IMG 2  | |  IMG 3  | |IMG 4 | |
| |      | |         | |         | |      | |
| |      | +---------+ +---------+ |      | |
| +------+                         +------+ |
| +------+                         +------+ |
| |IMG 5 |                         |IMG 6 | |
| |      |                         |      | |
| |      |                         |      | |
| +------+                         +------+ |
| +------+                         +------+ |
| |IMG 7 |                         |IMG 8 | |
+-------------------------------------------+

width: 33% height: 50%

+-------------------------+
| +------+ +---------+ +--|
| |IMG 1 | |  IMG 2  | |  |
| |      | |         | |  |
| |      | +---------+ +--|
| +------+                |
| +------+                |
| |IMG 5 |                |
| |      |                |
| |      |                |
| +------+                |
| +------+                |
| |IMG 7 |                |
+-------------------------+

html css dynamic

Answer 1

Answer №1

Although not flawless, one way to achieve this is by using a value that signifies the screen size without relying on percentages. In CSS, there are two options available: vw and vh. For your case, using vw for the viewport width would be ideal.

Essentially, vw represents the viewport width divided by 100, whereas vh stands for viewport height divided by 100.

These values adjust dynamically when the window is resized, ensuring consistent proportions. To illustrate, consider the following example:

.square
{
  width: 2vw;
  height: 2vw;
  background-color: lightblue;
  position: relative;
  top: 5vh;
  left: 5vw;
}

<div class="square">
</div>

While it's possible to perform more complex calculations by determining the screen's aspect ratio, the principle remains the same.

Answer 2

Although not flawless, one way to achieve this is by using a value that signifies the screen size without relying on percentages. In CSS, there are two options available: vw and vh. For your case, using vw for the viewport width would be ideal.

Essentially, vw represents the viewport width divided by 100, whereas vh stands for viewport height divided by 100.

These values adjust dynamically when the window is resized, ensuring consistent proportions. To illustrate, consider the following example:

.square
{
  width: 2vw;
  height: 2vw;
  background-color: lightblue;
  position: relative;
  top: 5vh;
  left: 5vw;
}

<div class="square">
</div>

While it's possible to perform more complex calculations by determining the screen's aspect ratio, the principle remains the same.

Answer 3

Answer №2

I found the solution I was looking for in the javascript onresize event.

<html>
<head>
</head>
<body onresize="myFunction()">
<span id="demo"><img src="img1.jpg" width="20%"></span>
<script>
function myFunction() {
    if (window.innerWidth > (screen.width/2))
    {
        var txt = "<img src='img1.jpg' width='20%'>";
    } else {
        var txt = "<img src='img1.jpg' width='";
        txt = txt + screen.width/10;
        txt = txt + "'>";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

This code will adjust the image size to 20% of the window's inner width until it reaches or exceeds the screen width, at which point the image size will stay constant at 10% of the screen width.

Answer 4

I found the solution I was looking for in the javascript onresize event.

<html>
<head>
</head>
<body onresize="myFunction()">
<span id="demo"><img src="img1.jpg" width="20%"></span>
<script>
function myFunction() {
    if (window.innerWidth > (screen.width/2))
    {
        var txt = "<img src='img1.jpg' width='20%'>";
    } else {
        var txt = "<img src='img1.jpg' width='";
        txt = txt + screen.width/10;
        txt = txt + "'>";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

This code will adjust the image size to 20% of the window's inner width until it reaches or exceeds the screen width, at which point the image size will stay constant at 10% of the screen width.

Adaptable positioning determined by screen and window width exclusively

Answer №1

Answer №2

Similar questions

Uncovering specific content within an html document with the help of BeautifulSoup

Reposition the CSS content

Tips for preventing a bootstrap modal from being dragged beyond its parent container

Ionic Troubleshoot: Issue with Reading Property

If a popup is present on the webpage, be sure to close it

A Python program utilizing Selenium webdriver for Chrome which attempts to retrieve and print out the elements inside a listbox, but encounters difficulties and is unable to

Blazor Dropdown Menus using <NavLink>

Can you explain the significance of this HTML code?

The Bootstrap 4 Carousel Indicators are missing from the page

The Drop-down menu with carousel in Bootstrap is experiencing difficulties displaying its sub-menu items

Is it possible to continuously increase the value of a CSS property with each click?

Creating a 2 by 2 division grid using the float property and setting a minimum height

The spacing within the HTML table appears to be sporadic and

I am encountering difficulty loading a .gltf file for use with Three.js on my React website

Creating a new table based on an if statement from an HTML table index value of x

There are three dropdown menus in my form, and the options available in each one are based on the choices made in the

The positioning of inline block elements is not aligned correctly

Use jQuery to change the background color when clicked

Object vanishing beneath layers despite z-index: 4 (topmost layer)

What are the options for transferring information between HTMX and Flask using JSON or another format aside from HTML?