Scaling issue

[redazu]

I'm sure this is a joke to figure out for anyone that knows any html, but I've literally been stuck on this for like 3 days.

I just want to have an image that's tall and skinny displayed in the browser where the image is contained, none of it getting cut off. It scales up to the biggest it can get and the limit is always either the window height or width. Do not want any distortion, the image must maintain it's shape. Body/background be solid black. I expect to have black space on either side of the image since it's a portrait style image.

That's the easy part for me.

Now I also need to display a small image that's like the size of a button on top of that image and it has to stay in it's place no matter what. It also has to scale with the big image whenever the big image has to scale up or down to fit the window. I also want the text OK to be displayed in the middle of that small image and it must also stay there and scale just like the small image does.

Like imagine having a piece of paper and you draw a square on it. Then you write OK in that little square. Then you magically scale that paper up and down, the square and text does too.

 

[redazu]

Sorry I meant to post the code I have so far. The only issue left is making the text inside the button container also scale inside of it just like the button container scales inside of the parent container

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background-color: rgb(0, 0, 0);
        }
        
        .Container {
            position: relative;
            justify-content: center;
            background-size: cover;
            background-position: center;
            height: 100vh;
            width: auto;
        }

        .Container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .button-container {
            position: absolute;
            width: 20%;
            height: auto;
            bottom: 20%;
            left: 50%;
            transform: translateX(-50%);
        }

        .button-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .Text-element {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 0%;
            left: 0%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .Text-element h1 {
            font-size: 100%;
            margin: 0;
            padding: 0;
            color: white;
        }
    </style>
</head>
<body>
    <div class="Container">
        <img src="img1.png" alt="Background image">
        <div class="button-container">
            <img src="img2.png" alt="Button image">
            <div class="Text-element">
                <h1>OK</h1>
            </div>
        </div>
    </div>
</body>
</html>

 

[tomliv]

I'm sure this is a joke to figure out for anyone that knows any html, but I've literally been stuck on this for like 3 days.

I just want to have an image that's tall and skinny displayed in the browser where the image is contained, none of it getting cut off. It scales up to the biggest it can get and the limit is always either the window height or width. Do not want any distortion, the image must maintain it's shape. Body/background be solid black. I expect to have black space on either side of the image since it's a portrait style image.

That's the easy part for me.

Now I also need to display a small image that's like the size of a button on top of that image and it has to stay in it's place no matter what. It also has to scale with the big image whenever the big image has to scale up or down to fit the window. I also want the text OK to be displayed in the middle of that small image and it must also stay there and scale just like the small image does.

Like imagine having a piece of paper and you draw a square on it. Then you write OK in that little square. Then you magically scale that paper up and down, the square and text does too.

You're losing me on the big image. If you want a tall, skinny image that scales but you don't want any distortion or anything getting cut off then I assume the image IS tall and skinny and CAN get wider as it gets taller, correct?

For the scaling text, you could use fluid typography that uses the clamp() method for the font size. For example:

button{
font-size: clamp(1rem, -1.206896551724138rem + 11.03448275862069vw, 5rem);
}

For the button placement, are you looking for it to be X distance from the bottom of the page? You sample code seems to do that.

 

[redazu]

Here's an example of what it looks like. Pic2 see how the OK text looks correct for the small box it's in? But if I drag the window higher then everything scales up as I drag it, except the text doesn't as you can see in pic1.

 

[tomliv]

Here's an example of what it looks like. Pic2 see how the OK text looks correct for the small box it's in? But if I drag the window higher then everything scales up as I drag it, except the text doesn't as you can see in pic1.

So you want the text to get bigger as the image gets smaller? By "drag the window higher" I am assuming you are making the viewport shorter and the image is scaling down in size. Having the text get bigger in this situation is the opposite of what devs do with responsive type. I suppose you can do this by reversing the numbers in the font-size code I added earlier. I use this tool to work out the text scaling: 🧮 Fluid Typography Calculator