Question 242908 in Html Question posted in
Some basic documentation can be found here.

Html – Child image makes parent div expand out of viewport. I've tried everything

With marshero.jpg
Without marshero.jpg

If I remove the marshero.jpg. Everything works 100%. The moment I add that image it makes the parent div taller than the viewport. I’ve tried everything. I just want the image height to fit inside the parent div height without the parent div going out of viewport. This is cursed.

I made a great website, and this issue have taken me as much time as the website itself.

Here is the code:

div.mars {
  min-height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: inherit;
}

div.martian {
  flex: 1 0 auto;
}

img.mars {
  max-width: 100%;
  /* Ensure it doesn't exceed the parent width */
  max-height: 100%;
  /* Ensure it doesn't exceed the parent height */
  width: auto;
  /* Let the width adjust based on the aspect ratio */
  height: auto;
  /* Let the height adjust based on the aspect ratio */
  object-fit: contain;
}


/* nav */

nav.menu {
  background-color: #f9eae2;
  padding: 16px;
  @media only screen and (max-width: 1050px) {
    padding: 0px;
  }
}

ul.inline {
  text-align: center;
  @media only screen and (max-width: 1050px) {
    text-align: left;
  }
}

li.inline {
  display: inline;
  padding-left: 16px;
  @media only screen and (max-width: 1050px) {
    display:list-item;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
<div class="mars">
  <div class="martian">
    <img class="mars" src="img/marshero.jpg">
  </div>
  <div class="greet">
    <a href="https://solarsystem.nasa.gov/planets/mars/overview/">
      <p class="inf">Click here to learn more about Mars at solarsystem.nasa.gov</p>
    </a>
  </div>
  <nav class="menu">
    <ul class="inline">
      <li class="inline"><a href="../index.html">▶About me</a></li>
      <li class="inline"><a href="ProductDesign/index.html">Product design</a></li>
      <li class="inline"><a href="Research/index.html">Research</a></li>
      <li class="inline"><a href="ProductDevelopment/index.html">Product development</a></li>
    </ul>
  </nav>
</div>

I just want the image height to fit inside the parent div height without the parent div going out of viewport.

Tags:

2

Answers


  1. 0

    You may add background CSS property to class="martian" in place of <img>. May refer this code for implementation.

    div.mars {
  min-height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: inherit;
}

div.martian {
    flex: 1 0 auto;
    background-image: url("https://solarsystem.nasa.gov/internal_resources/6044/marshero.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}



/* nav */

nav.menu {
  background-color: #f9eae2;
  padding: 16px;
  @media only screen and (max-width: 1050px) {
    padding: 0px;
  }
}

ul.inline {
  text-align: center;
  @media only screen and (max-width: 1050px) {
    text-align: left;
  }
}

li.inline {
  display: inline;
  padding-left: 16px;
  @media only screen and (max-width: 1050px) {
    display:list-item;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
        <div class="mars">
        <div class="martian"></div>
        <div class="greet">
          <a href="https://solarsystem.nasa.gov/planets/mars/overview/">
            <p class="inf">Click here to learn more about Mars at solarsystem.nasa.gov</p>
          </a>
        </div>
        <nav class="menu">
          <ul class="inline">
            <li class="inline"><a href="../index.html">▶About me</a></li>
            <li class="inline"><a href="ProductDesign/index.html">Product design</a></li>
            <li class="inline"><a href="Research/index.html">Research</a></li>
            <li class="inline"><a href="ProductDevelopment/index.html">Product development</a></li>
          </ul>
        </nav>
      </div>
    Login or Signup to reply.
  2. 0

    Do the following

    div.mars{
   max-height:100vh; //You have set min-height, it should be max
}
div.martian {
   flex-grow:1; //To acquire remaining space 
   overflow:auto; //<--This is actual magic
   //flex: 1 0 auto; //You don't need
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search