0

I was provided an answer yesterday about how to maintain a responsive box that never overflows its viewport.

CSS responsive box that maintains aspect ratio but NEVER overflows the viewport

However I've never run into another problem, I'm trying to place an image within the container and unfortunately all attempts to resize the image to fit the dynamic container using variations of object-fit:, width: & max-width:, do not work.

Could someone please help me with how I might place an image that Is contained within and occupies 100% of the width of the responsive container. thanks in advance - CES

    :root{
    --varWidth: 80vw;
    --varHeight: calc(80vh + 3.5vh);
    }
    
    .aspectRatio3x2 {
        --varAspectRatio: calc( 3 / 2);
        --varCalcHeight: min(calc(var(--varWidth) / var(--varAspectRatio)), var(--varHeight));

        height: var(--varCalcHeight);
        width: calc(var(--varCalcHeight) * var(--varAspectRatio));
        background-color: gold;

    }
    
    .imgMain, .imgOther {
        object-fit: contain;
        width:100%;
        max-width:100%;

        border: 2px solid hsla(0, 0%, 100%, .15);
    }

    .imgMain{
        border-bottom: none;
    }

    
    /* Other CSS */
    .contentContainer {
        width: 100%;
        height: auto;
        padding: min(4vh, 3.5vw);
        background: hsl(0 0% 10%);
        background:red;
    }

    .pageDefault {
        width:100%;
        background-color: black;
    }

    .pageDefault article {
        position: relative;
        margin: 0 auto;

        background: lime;
    }
<div class="contentContainer">
        <main id="idMainContent" class="pageDefault">
            <article class="aspectRatio3x2">
                <figure class="">
                    <picture class="">
                        <img class="imgMain" src="../../images/3x2.jpg" />
                    </picture>
                    <figcaption></figcaption>
                </figure>-->
            </article>
        </main>
    </div>

enter image description here

enter image description here

CES
  • 87
  • 12
  • Could you add your required images to your snippet. – A Haworth Sep 18 '21 at 15:27
  • First of all thank you for the answer yesterday, I've been search for that answer for weeks. Not sure what you mean but url for the image is: - http://www.evansante.com/images/portfolio/mainbnw.jpg – CES Sep 18 '21 at 15:51
  • Thanks, that image has aspect ratio 16 / 9 not 3 / 2 – A Haworth Sep 18 '21 at 15:53
  • I've included the 3/2 above or you can go to the link... sorry for the confusion – CES Sep 18 '21 at 16:05

1 Answers1

1

This snippet is as given in the question with a couple of alterations, the image src is set and the ratio is changed from 3 / 2 which was in the original question to 16 / 9 which is the aspect ratio of the image given in a comment.

Note: the image can flow below the viewport because some padding/bars have been added since the original question - the calculations need to take account of the dimensions of these to ensure the image never gets too big.

:root {
  --varWidth: 80vw;
  --varHeight: calc(80vh + 3.5vh);
}

.aspectRatio3x2 {
  --varAspectRatio: calc( 16 / 9);
  --varCalcHeight: min(calc(var(--varWidth) / var(--varAspectRatio)), var(--varHeight));
  height: var(--varCalcHeight);
  width: calc(var(--varCalcHeight) * var(--varAspectRatio));
  background-color: gold;
}

.imgMain,
.imgOther {
  object-fit: contain;
  width: 100%;
  max-width: 100%;
  border: 2px solid hsla(0, 0%, 100%, .15);
}

.imgMain {
  border-bottom: none;
}


/* Other CSS */

.contentContainer {
  width: 100%;
  height: auto;
  padding: min(4vh, 3.5vw);
  background: hsl(0 0% 10%);
  background: red;
}

.pageDefault {
  width: 100%;
  background-color: black;
}

.pageDefault article {
  position: relative;
  margin: 0 auto;
  background: lime;
}
<div class="contentContainer">
  <main id="idMainContent" class="pageDefault">
    <article class="aspectRatio3x2">
      <figure class="">
        <picture class="">
          <img class="imgMain" src="https://i.stack.imgur.com/DT0i7.jpg" />
        </picture>
        <figcaption></figcaption>
      </figure>-->
    </article>
  </main>
</div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14