13 replies

Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment

My problem comes in two parts, which seem to heavily rely on each other. The first is the vertical alignment problem. My page has a logo and a progress bar below it like so:

<section>
    <img src="logo.svg" id="logo">
    <div id="progress-bar"></div>
</section>

<section>
    <img src="logo.svg" id="logo">
    <div id="progress-bar"></div>
</section>

I need the spacing between these elements on the vertical axis to be the following:
1.

37.6%

37.6%

of the

<section>

<section>

's height between the

<img>

<img>

and the top of the

<section>

<section>

20%

20%

of the

<section>

<section>

's height between the

<img>

<img>

and the progress bar

<div>

<div>

14.7%

14.7%

of the

<section>

<section>

's height between the progress bar

<div>

<div>

and the bottom of the

<section>

<section>

I've tried using margins, top/bottom, flexbox, and grid. The best results I've gotten thus was by using flexbox, by inserting invisible elements where spacing is needed, and then giving them

flex-shrink: 0;

flex-shrink: 0;

.

Anyways, not all solutions for this work, because I need the logo to keep its aspect ratio. When the page is squished vertically, I expect the logo to shrink, so the spacing maintains the correct values. I've achieved this using

object-fit: contain;

object-fit: contain;

. Problem with this solution, is that I need the progress bar's width to match that of the svg.

object-fit: contain;

object-fit: contain;

makes it so that the width of the

<img>

<img>

element doesn't necessarily match that of the svg inside of it. So I really don't know how to even extract the width of the svg

The last thing that I need is for the progress bar's height to be a constant value, like

10px

10px

. The widths of both the logo and the progress bar are currently set to

width: min(1080px, 74.5%);

width: min(1080px, 74.5%);

Thank anyone in advance for trying to help

I've been stuck on this for a while

KP-C

Kevin Powell - Community•3y ago•

13 replies

Catz

Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment

My problem comes in two parts, which seem to heavily rely on each other. The first is the vertical alignment problem. My page has a logo and a progress bar below it like so:

<section>
    <img src="logo.svg" id="logo">
    <div id="progress-bar"></div>
</section>

<section>
    <img src="logo.svg" id="logo">
    <div id="progress-bar"></div>
</section>

I need the spacing between these elements on the vertical axis to be the following:
1.

37.6%

37.6%

of the

<section>

<section>

's height between the

<img>

<img>

and the top of the

<section>

<section>

20%

20%

of the

<section>

<section>

's height between the

<img>

<img>

and the progress bar

<div>

<div>

14.7%

14.7%

of the

<section>

<section>

's height between the progress bar

<div>

<div>

and the bottom of the

<section>

<section>

I've tried using margins, top/bottom, flexbox, and grid. The best results I've gotten thus was by using flexbox, by inserting invisible elements where spacing is needed, and then giving them

flex-shrink: 0;

flex-shrink: 0;

object-fit: contain;

object-fit: contain;

. Problem with this solution, is that I need the progress bar's width to match that of the svg.

object-fit: contain;

object-fit: contain;

makes it so that the width of the

<img>

<img>

element doesn't necessarily match that of the svg inside of it. So I really don't know how to even extract the width of the svg

The last thing that I need is for the progress bar's height to be a constant value, like

10px

10px

. The widths of both the logo and the progress bar are currently set to

width: min(1080px, 74.5%);

width: min(1080px, 74.5%);

Thank anyone in advance for trying to help

I've been stuck on this for a while

Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment

Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment

Similar Threads

Similar Threads

Similar Threads