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

Html – How can I keep an image from breaking out of my body container?

When I insert an img into the article element it makes it so my body no longer is 100% of the browser height.

Without the image the body scales fine, goes all the way down to the bottom of the screen. But upon adding the image, it does not push the body background down. What am I doing wrong? I did not include the code for the whole page, just the parts that I think are important to my problem. If more info is needed let me know.

Picture of Issue

<body>
  <main>
    <article>
       <img src="https://www.lawrenceprospera.org/images/quintana/Page_Under_Construction.jpg" width="600px" align="right">
       <h2>Hello</h2>
       This website is a work in progress. Sorry for the mess!
     </article>
   </main>
</body>


html {
    background: #7f4160;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

body {
    background: #424160;
    color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 800px;
    min-height: 100%;
    height:100%;
    padding: 2em 2em 4em;
    border-left: 3px solid #573444;
    border-right: 3px solid #573444;
}

img {
    background: transparent;
    border: 10px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding:0;
    display: inline-block;
    max-width: 95%;
}
Tags:

2

Answers


  1. 0

    You can try to apply a "clearfix" solution to the element to ensure that it properly contains its floated child elements.
    "clearfix" is a technique used in CSS to ensure that an element properly contains its floated child elements. When an element contains floated elements, it can sometimes collapse and not extend to the full height of its floated contents.

    You can read more here.

    Here’s an example of how you can modify your code:

    <body>
  <main>
    <article class="clearfix">
      <img src="https://www.lawrenceprospera.org/images/quintana/Page_Under_Construction.jpg" width="600px" align="right">
      <h2>Hello</h2>
      This website is a work in progress. Sorry for the mess!
    </article>
  </main>
</body>

    And you can add the following CSS code to create the clearfix:

    .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

    Side note:
    Please consider using CSS classes instead of inline styles (align="right", width="600px") for better separation of concerns and maintainability.

    Login or Signup to reply.
  2. 0

    Set the height of the image as "auto". It might solve the issue.

    img{
    height: auto;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search