0

I have been wrestling with this for a few days now, and I just don't see it. I am trying to create a responsive box that maintains the aspect ratio in both directions (the aspect ratio box is never larger than 90% of the viewport). I've tried using both height and width as the basis for the calculation but neither works and height seems to be cleaner for my purposes (The height of the images never change but the width will depending on the aspect ratio of the image.

The examples below work up until the point that the box becomes wider than the viewport, what I would like is at that point the height then is adjusted to accommodate the width but maintained the aspect ratio. Any help would be greatly appreciated, thanks in advance - CES

/*#region xxx - Defaults
---------------------------------------------------------------------------------*/
        
    /*#region Content Container
-----------------------------------------------------------------------------*/
    .contentContainer {
        width: 100%;
        height: auto;
        padding: min(4vh, 3.5vw);

        background-color: hsl(0 0% 10%)
    }

    .pageDefault {
        width:100%;

        background-color: black;
    }

    /*#endregion */


    /*#region Article
-----------------------------------------------------------------------------*/
    .pageDefault article {
        position: relative;
        display: block;
        margin: 0 auto;
        
        background-color: red;

        max-height: 80vh;
    }

    .aspectRatio3x2{
        display: block;

        height: auto;
        max-height: 80vmax;
        width: auto;
        max-width: calc(80vmax * 1.5vmax);
    }

    .aspectRatio3x2{
        width: calc(80vmin * 1.5vmax);
        padding-bottom: 80vmin;
    }

    .aspectRatio3x2{
        height: 80vmax;
        width: calc(80vmax * 1.5vmax);
    }

    .aspectRatio3x2{
        aspect-ratio: 3/2;
        height: 80vmax;
        height: min(90vw, 80vmax);
    }

    .aspectRatio3x2{
        aspect-ratio: 3/2;
        height: 80vmax;
        max-width: min(90vw, calc(80vmax * 1.5vmax));
    }

        /*#endregion */
<body itemscope itemtype="http://schema.org/WebPage">
    <div class="contentContainer">
        <main id="idMainContent" class="pageDefault">
            <article class="aspectRatio3x2">
                xxx
            </article>
        </main>
    </div>
</body>
CES
  • 87
  • 9
  • Not sure I've entirely understood - you want a box that always has aspect ratio 3/2 but is never wider than 90% of the viewport width. Is that right? And within those constraints are you wanting it to be as big as possible? – A Haworth Sep 17 '21 at 14:50

0 Answers0