Learn CSS Flexbox by Building a Photo Gallery - Step 7

HTML-CSS
1

Tell us what’s happening:

Not a problem, more like a question regarding img element and gallery class.
So i see there is a cat image inside the gallery class. But the thing that got me confused is, When the gallery class set to 50% width, the cat image somehow appear pass the red line of gallery class, and when i use the fullscreen version of the preview. The image of the cat are inside the red line. But the question is, how it outside the red line on preview, but not on fullscreen. And when the IMG element width set to 100%, the image of the cat now are inside the red line, without the fullscreen preview active.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>
  </body>
</html>

/* file: styles.css */

/* User Editable Region */

.gallery{
  width: 50%;
  border: 5px solid red;
}
img{
  

}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Flexbox by Building a Photo Gallery - Step 7

2

The img has its own size (which is encoded in its file) and it is displayed at that size by default. So whether the screen is small or big, the image is at that size unless you explicitly set its width. When you set its width to 100% however, the browser knows that you want the image to always take up exactly 100% of the container (gallery class element).
As for the gallery div, its size changes depending on the width of the preview pane because we haven’t stated that it should be a fixed size. We’ve just said it should be 50% of the available width of the body.

hope this helps

2 Likes
3

VERY well explained. thank you.

2 Likes
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.