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

Html – Challenges with Sizing 3 Image Columns in Website Body

I’ve been working on a website with a header, body, and footer structure. However, I’ve encountered a challenge when attempting to insert three image columns within the body section. The images appear excessively large, causing them to extend below the footer. Additionally, the third image is wider and larger than intended, almost dominating the entire webpage, surpassing the width of both the header and footer. I’m facing difficulty in reducing the height of the images, and my attempts to adjust the image widths only impact the first two images.
This is my code:
https://github.com/moseskbalunywa/Stackoverflow

I attempted to integrate three image columns within the body section of my website. My expectation was to control the image sizes within the body section. However, the outcome is that all three image columns are oversized. I can adjust the width of the first two images, but I am unable to change their height. Additionally, I have encountered a problem with the last image, as it appears to be unresponsive to size adjustments. My information sources for this task included ChatGPT, W3Schools, and Stack Overflow.
Here is a summary of my failed sources:
https://www.w3schools.com/howto/howto_css_three_columns.asp
How do I create 3 columns with responsive text and images?
Chatgpt:

<!-- Your existing code for header and navbar -->

<div class="row">
  <div class="column">
    <img src="images/Castle.jpg">
  </div>
  <div class="column">
    <img src="images/Mascottes.jpg">
  </div>
  <div class="column">
    <img src="images/Crush's Coaster Nemo Attractie afb van een schildpad.jpg">
  </div>
</div>

<!-- Your existing code for footer -->

</body>
</html>
/* Remove any existing styling for .row and .column */
.row {
  display: flex;
  justify-content: space-between;
}

.column {
  flex: 1;
  padding: 10px;
}


/* Rest of your CSS styles remain the same */


.column img {
  width: auto;
  height: 100px;
  /* You can also use max-height to maintain aspect ratio */
  /* max-height: 100px; */
}

.column img {
  max-width: 100%;
  max-height: 100vh; /* Stel de maximale hoogte in op de hoogte van de viewport (zichtbare pagina) */
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    My classmate assisted me, and I have now found the solution. The issue was that I attempted to edit the column instead of the image. The column properties remained unchanged, but my classmate added the image names to my CSS file, included a grid in my CSS file, and implemented a grid in my div class. Btw he also added a left rem in my css column code. Here is the solution:

      <div class="grid">
<div>
  <img id="castle" src="images/Castle.jpg">
</div>
<div>
  <img id="mascot" src="images/mascot.jpeg">
</div>
<div>
  <img id="mascot2" src="images/mascot2.jpg">
</div>


    .grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow-x: hidden;
  overflow-y: hidden;
}
#castle {
  width: 125%;
  height: 125%;
  grid-column: 1 / 2;
}

#mascot {
  width: 125%;
  height: 125%;
  grid-column: 2 / 3;
}

#mascot2 {
  width: 125%;
  height: 125%;
  grid-column: 3 / 4;

}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 300px;
  padding: 10px;
  left: 8rem;

}


  2. 0

    First, I tried the W3Schools’ solution and it works on my end.

    * {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: inline-start;
  width: 20%;
  display: table;
  padding: 5px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  clear: both;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="StyleSheet.css" rel="stylesheet">
  </head>
  <body>
      <div class="row">
        <div class="column">
          <img src="https://source.unsplash.com/320x480?computer">
        </div>
        <div class="column">
          <img src="https://source.unsplash.com/320x480?computer">
        </div>
        <div class="column">
          <img src="https://source.unsplash.com/320x480?computer">
        </div>
      </div>
  </body>
</html>

    Try using relative units, such as rem or em. Using percentage can also solve the problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search