Inspiring

Question

Question about maintaining proportions of a block element set to 100% height

Forum|Forum|7 years ago
December 2, 2018
3 replies
841 views

Let's say I have a rectangular container (for instance, a <div>) filling the width of the screen ("100%") but with a very specific height ("450px").

This wrapper contains a block element -- let's say a <span> -- that needs to fill 100% height at all times, while maintaining a very specific aspect ratio for the width (so for the sake of argument, let's say 16:9). Since the container is 450px high, the proportionate width would be 800px -- however, I'd rather not have to specify that manually.

Because the wrapper's height will be changing according to screen resolution, and it would simplify things if I could just change this one property (ie, the wrapper's height) and have the child's code be responsive to that.

Crude example :

<div style="width:100%; height:450px" id="wrapper">
<span style="display:inline-block; height:100%; width:???" id="child"></span>
</div>

If the <span> was an <img>, the task would be easy, by using style="height:100%; width:auto" because the file itself contains the fallback aspect ratio. But in the case of a <span> or a <a>, the browser is flying blind. There has to be some sort of equation in the 'width' to go along with that 100% height telling it to go 16:9.

Note that I don't even know if this is doable without witchcraft or sorcery, I could literally be asking the impossible.

Thanks!

This topic has been closed for replies.

pziecina

Legend

To get the 16:10 width ratio from the height using css calc(), you simply multiply by 1.6 - width: calc(100vh * 1.6);

To get the 16:10 height ratio from the width using css calc(), you divide by 1.6 - height: calc:(100vw / 1.6);

But as I say, you would never do this in rwd, unless you first checked that the size to width values made sense to use. Otherwise you could end up with content overflowing, unusable content, or even making the user zoom-in, in order to use the content.

U

Under S.Author

Inspiring

pziecina wrote
To get the 16:10 width ratio from the height using css calc(), you simply multiply by 1.6 - width: calc(100vh * 1.6);
To get the 16:10 height ratio from the width using css calc(), you divide by 1.6 - height: calc:(100vw / 1.6);
But as I say, you would never do this in rwd, unless you first checked that the size to width values made sense to use. Otherwise you could end up with content overflowing, unusable content, or even making the user zoom-in, in order to use the content.

Are you saying this is doable with CSS alone (so no javascript, and no <img> references?) Because every example thrown at me included one or the other. Could you show me your method in specific context? I'm embarrassed to admit that unless you literally apply your suggestions to my code, I don't have the skills to properly apply the info you're giving me.

Here is the starting code again :

<a href="#" style="height:450px; width:???; background:url('bg.jpg') cover"></a>

If you can tell me what to replace that entire line with, I'll give it a spin.

I find visuals help, so :

As shown, the <a>'s (child elements) will function like a row of identically-sized buttons in a nav bar, stacked against each other via float. There will be no wrapping or overflowing (the code is responsive to most size contingencies).

I'm still very skeptical that this is even doable. Sounds more like a new feature suggestion for W3C ie, scaling by simply specifying an aspect ratio on either height or width. As a designer, the concept makes me drool.

Whether it's currently doable or not, at least the idea is out there in the universe

pziecina

Legend

Using the height set at 450px the css calc() function would be -

width: calc(450px x 1.6);

css calc will only work if you know what a value is in advanced, (even if it is a % value) as it cannot get a value from an unknown. As rwd does not work well with specific value declerations, (such as px) so using calc() hits a limitation when using rwd except for use with vw/vh/% values.

You should also move any height/width from elements to your css, if you intend to code for rwd in the future.

https://forums.adobe.com/people/Under+S. wrote
I'm still very skeptical that this is even doable. Sounds more like a new feature suggestion for W3C ie, scaling by simply specifying an aspect ratio on either height or width. As a designer, the concept makes me drool.
Whether it's currently doable or not, at least the idea is out there in the universe

The idea has been suggested, but discarded due to the problems I mentioned in previous posts. The general opinion in discussions was that modern web designs (or designers) should make designs that 'flow' for display on all devices that an end user may use. That is one of the reasons css flexbox and css grid layouts are recommended by so many now.

U

Under S.Author

Inspiring

I can't help but feel we're straying from the initial premise, here.

I'll simplify the question by taking the wrapper out of it.

Is it possible to maintain a responsive 16:10 ratio on the size of block elements (like <span> or <a>) where only one of the orientations has been specified (ie, "height:450px")?

Here's a crude example of what I'm (clumsily) trying to ask :

<a href="#" style="height:450px; width:???; background:url('bg.jpg') cover"></a>

Where ??? = 16:10 aspect ratio.

So if height changes, so does width (the way an <img>'s proportions are maintained if you set one of the sides to "auto", since it has the ratio embedded in the image itself to fall back on).

In other words, I'm looking for a way to write : "width:160% of height" in CSS, if that's even possible.

PS: If there's a way to do this without specifying EITHER of the sides and just letting them fill their container -- while maintaining that 16:10 ratio at all times -- even better. (Basically, fill until container height or width is reached, whichever comes first, but never losing shape, only changing scale. Like a series of identical buttons in a responsive nav bar.)

BenPleysier

Community Expert

The only way to do this is by using JavaScript (probably jQuery)

There will be two scenarios, one where the height is greater than the child width, the other, where the height is less than the child width.

The code (jQuery) would look like

if ($(#wrapper).height() * 1.6 < $(#wrapper).width()) {
     var childwidth = $(#wrapper).height * 1.6;
     var childheight = $(#wrapper).height;
} else {
     // not sure what you want to do here because it will not fill the full height.
}

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Preran

Community Manager

If I understood your question correctly, the answer in this post html - keep aspect ratio of expandable div - Stack Overflow should provide you with some insights until the experts here pitch in with a better answer.

Thanks,

Preran

pziecina

Legend

The reason no one is answering Preran is because there is no definitive answer.

It all depends on the layout method being used, and what the device is that the layout is being displayed on. The possible solution providing the OP is using a layout method such as css flexbox is to use the css calc() function, to calculate the width to height ratio, and apply it to the containing element.

Preran

Community Manager

Thank you, Paula. Makes sense to me.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded