0

I'm attempting to create a webcomic style layout in HTML5 and CSS for personal learning. My goal is for the main-container class and all of its contents to fit inside the browser's viewport. The problem I'm encountering is that the image scales up at certain window sizes and the HTML that comes after the image is cut-off.

I've attempted to apply max-height and height values using the "vh" unit of measure in the main-container css. I can't seem to get it to work correctly. I've tried things mentioned on Stackoverflow (This and This), but none seem to produce the desired result. I'm thinking I'm missing something basic about the CSS behavior.

(if it matters, this practice image file is 800x500 in size by default).

Here is the code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.comic-container {
  display: flex;
  flex-direction: column;
  margin-left: 5%;
  margin-right: 5%;
}

.comic-image {
  object-fit: contain;
}

.comic-nav {
  display: flex;
}

.f-center {
  align-self: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="../css/comic.css" rel="stylesheet" />
</head>

<body>
  <div class="main-container">
    <h1 class="f-center">Site Title</h1>

    <div class="comic-container">
      <h4 class="f-center">Comic Title</h4>
      <img src="../images/placeholder.png" alt="Comic Image" class="comic-image" />
      <p class="f-center">Comic Text and Punchline</p>

      <div class="f-center">
        <a href="#">First</a> |
        <a href="#">Previous</a> |
        <a href="#">Next</a> |
        <a href="#">Last</a>
      </div>
    </div>

    <h6 class="f-center">Copyright &copy;XXXX - Person</h6>
  </div>
</body>

</html>

Window-size shrunk, all contents fit

Window-maximized, contents cut off

Bumhan Yu
  • 2,078
  • 1
  • 10
  • 20
Jeremiah Plummer
  • 3
  • 2

1 Answers1

0

Well, that's how flex boxes work in concordance with max-width/width set to 100%. The image will grow and will take the whole width of the flexed div/container.

    display: flex;
    flex-direction: column;

    margin-left: 5%;
    margin-right: 5%;
}

Technically, for your current display, you don't really need this. But if you want to keep it and restrict the image, you can either set a set width (i.e., 60%) for your image or have @media queries do the job of restyling the view accordingly.

octaviandd
  • 169
  • 2
  • 19
  • Thank you - that helps get it closer to the desired behavior. Am I using flexbox incorrectly possibly? Maybe I should be trying grid? – Jeremiah Plummer May 05 '22 at 16:36