Kevin Powell - Community•3mo ago

How to maintain the proportions of an SVG across different screen sizes? (1920x1080 / 1440x900/ ...)

I want the SVG to always stay in the same position with the wave touching the exclamation point. Can someone help me, please?

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="custom-shape-divider">
        <svg viewBox="0 0 1093 630" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin meet">
            <path d="M601.093 543.416C412.101 347.443 121.618 309.428 0 314.918V0H1092.5V547.92C936.238 630.801 734.462 681.711 601.093 543.416Z"/>
        </svg>
    </div>

    <section class="hero">
        <div>
            <h1>Wellcome to my website!</h1>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="scroll-down">&#x25BC;</div>
    </section>

</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="custom-shape-divider">
        <svg viewBox="0 0 1093 630" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin meet">
            <path d="M601.093 543.416C412.101 347.443 121.618 309.428 0 314.918V0H1092.5V547.92C936.238 630.801 734.462 681.711 601.093 543.416Z"/>
        </svg>
    </div>

    <section class="hero">
        <div>
            <h1>Wellcome to my website!</h1>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="scroll-down">&#x25BC;</div>
    </section>

</body>
</html>

css.txt

12 Replies

ἔρως•3mo ago

have you tried aspect-ratio: 1093/630?

kikutiOP•3mo ago

I tried, but it didn't work. I'm trying a different approach using grids, but I'm having trouble keeping the grid proportions at 50/50.

kikutiOP•3mo ago

teste.html

ἔρως•3mo ago

can you put this in a codepen or jsfiddle?

kikutiOP•3mo ago

https://codepen.io/Jo-o-Vitor-Kikuti/pen/ExBMqPX

ἔρως•3mo ago

font-size: 0.520834vw; /* 1rem = 10px */ <-- that's not how it works ...

ἔρως•3mo ago

i don't see what's wrong, it seems to work fine

kikutiOP•3mo ago

I would like the image to shrink as the screen width gets smaller. For example, column 1, row 1 is always wider than column 2, row 1. I would like to know if there's a way for both to always use half of the current width.

kikutiOP•3mo ago

Here is an example.

ἔρως•3mo ago

set max-width of 100% to the images, and change grid-template-columns to auto auto for .hero it won't give you exactly what you need, but it will get almost there you might need to try with object-fit: cover as well

kikutiOP•3mo ago

Thank you for the tips. I made some adjustments, but this problem appeared. Even using object-fit: cover, in extreme cases with a width greater than 2000 pixels, the images separate.

ἔρως•3mo ago

yeah, i saw that same thing happening

Gaming

Programming

How to maintain the proportions of an SVG across different screen sizes? (1920x1080 / 1440x900/ ...)