CSS Problem - Constrain an object's width BY height (flexible) + centre it

Limbo
Limbo
Established NormPosts: 27,381 edited February 24 in Help Me!
Turns out this is harder than I thought...

It's pretty easy to constrain an relatively positioned element's height based on width (using padding-top as % and absolutely positioning child with 100% height/width inside it) but, doing it the other way around is a fucker. (Note - I need to do this to a container, not an image, which would be easy peasy...)

Any help would be great...

Here's a helpful diagram to show what I mean.

2lafnkw.png

Comments

  • Limbo
    Limbo
    Established Norm Posts: 27,381
    So the height of that space with the 4:3 container is flexible
  • Limbo
    Limbo
    Established Norm Posts: 27,381
    I'm probably being very stupid btw - been up since 4am.
  • jamblo
    jamblo
    Tea Snob Posts: 5,592
    So the width is a %/ratio of the height, rather than the other way around?
  • jamblo
    jamblo
    Tea Snob Posts: 5,592
    I just had a jsfiddle... I think you're gonna have to jQuery this problem dude...
  • Limbo
    Limbo
    Established Norm Posts: 27,381
    Yeah the width is % of height - exactly.

    If I use jQuery I think the overhead would be enormous. I'm sure there's a way - just not found it.
  • Limbo
    Limbo
    Established Norm Posts: 27,381
    I wonder if I use a scaled image (which naturally scales like this) to 'paint' the space I can then make a div fill it...
  • LeakySandwich
    LeakySandwich
    jQuery works...

    https://jsfiddle.net/3tchnhkp/6/

    The image idea should also work. It does in my head.
  • Limbo
    Limbo
    Established Norm Posts: 27,381
    Nice - that's a great fallback (which I'm using for IE9/10).

    Asked on CSS tricks too. Someone suggested I use Viewport units and calc which also works a treat!
    <div style="position:absolute;top:125px;right:0;left:0;bottom:50px;background: silver;position:relative;">
    <div style="background:blue;margin: auto;height:calc(100vh - 175px);width: calc(100vh / 9 * 16 - 175px);max-width:100%;background: blue;"></div>
    </div>
    

    I've added in some calculations (Which work in most version of IE too). My only concern is vh not working in some browsers...
  • calder12
    calder12
    Senior Member Posts: 13,484 edited February 24
    Am I missing something? In either solution you'd have to be careful with the content of the div though, they'll both overrun the container at small sizes, but that should be easy to handle for the most part with media queries as per the example.

    https://jsfiddle.net/calder12/3tchnhkp/20/
  • jamblo
    jamblo
    Tea Snob Posts: 5,592
    Limbo wrote: »
    I wonder if I use a scaled image (which naturally scales like this) to 'paint' the space I can then make a div fill it...

    I'd be tempted by this solution personally.
  • Limbo
    Limbo
    Established Norm Posts: 27,381
    Mine works great Jamblo. I just set a max width on the div for portrait viewports + handle tuning with media queries. IE9+ handles VH and calc too
  • jamblo
    jamblo
    Tea Snob Posts: 5,592
    calc is a beaut
Sign In or Register to comment.
© Copyright 2003 - 2016 - DT by Kooc Media