CODEWITHSUNDEEP
htmlcss
Nagusameta
Nagusameta

Reputation: 99

Images retain size when zooming out the page that I am trying with html and css

I'm creating a fan-made page for studying purposes and I encountered this accidentally.

When I zoom out the page with my mouse scroll, the images remain big, and the content inside the grid containers also get weird formatting.

What I expected to see was the page would just get normally smaller, but it all becomes funky when I zoom out. Please help! Here is a Screenshot of the problem

*{
    font-family: roboto, arial;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0px;
}

h2 {
    font-family:  century gothic, verdana, tahoma;

}

p {
    text-align: justify;
    
    
}


#main{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

#top-head-img {
    display: flex;

    overflow: hidden;
    justify-content: center;


}

#top-head-img img {
    width: 1600px;
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;



}

#top-head-img img:hover {
    transform: scale(1.1);
    
}


#header {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0;
    margin: 0;
}



#logo {
    background: #060B24;
    display: grid;
    grid-template-columns: 10% 1fr;

    
}
    #header-img {
        width: 100%;
        height: 100%;
    }

    #header-text {
        padding: 0px 10px;
        color: white;
    }

#nav-bar {
    background: #060B24;

    
}

#nav-bar ul{
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
    justify-items: center;
    align-content: center;

}

#nav-bar li a{
    text-decoration: none;
    color: white;       
}



#feat-section {
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: auto;   
    grid-row-gap: 20px;


}
    .description {
        width: 100%;
        text-align: justify;

        

    }
    .description p {
        text-indent: 20px;
        
        
    }
    .icon {
        display: flex;
        justify-content: center;
    }
    .icon img{
        width: 100%;
        min-width: 50%;
        align-content: center;
        

    }


#products-section {
    


}

#product-imgs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.grid-header {
    /*grid-column: 1/4;*/
    text-align: center;
}


.product-box  img {
        /*width: 50%;*/
        height: 40vh;
        /*margin-left: 25%;*/
        margin-right: 5px;
    }



.column-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.row-section {
    display: grid;
    grid-template-columns: 45% 1fr;
    grid-column-gap: 20px; 
}
#video {
    max-width: 100%;
    height: calc(315px*0.7);
    
}

#email {
    width: 50vw;
    height: 40px;
    border-radius: 10px;
    padding: 10px;
}

#submit {
    background-color: #060B24;
    color: white;
    width: 10vw;
    height: 8vh;
    font-size: 70%;
    text-align: center;
    border-radius: 10px;
    display: block;
    margin: 20px auto;
    padding: 5px;
}

#submit:hover {
    background-color: #3A3849;
}

/*when screen small*/
@media (max-width: 750px) {
    #header {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 0;
    margin: 0;
    }

    #logo {
    background: #060B24;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 4vh;
    

    
    }

    #header-img {
        width: 30%;
        height: auto;
        justify-self: center;

    }

    #header-text {
        margin: 0px 0px !important;
        text-align: center;
        padding: 0px auto;
        align-self: start;
    }
.product-box  img {
    width: 100%;
    margin: 0;
    
    }
    

}
<!DOCTYPE html>
<html>
    <head>
        <title>Honkai Impact Merch</title>
        <link rel="stylesheet" type="text/css" href="productstyleFlex.css">
        <meta name="viewport" content="width=device-width,initial-scale=1">

    </head>

    <body>
        <a name="top"></a>
        

        <header id="header">
            <div id="logo">
                <img src="https://upload.wikimedia.org/wikipedia/en/d/da/Honkai_Impact_3rd_logo.png" id="header-img">
                <div id="header-text">
                    <p id="header-text">Official Honkai Merch by (not)Mihoyo</p>
                </div>
            </div>
            

            <nav id="nav-bar">
                <ul>
                    <li><a href="#feat-section" class="nav-link">Features</a></li>
                    <li><a href="#products-section" class="nav-link">Products</a></li>
                    <li><a href="#video" class="nav-link">Video</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div id="top-head-img">
            <img src="https://uploadstatic-sea.mihoyo.com/bh3/upload/officialsites/201910/pcbanner_1570612871_7480.png">
        </div>

    <main id="main">
        <div >
            <h1 class="grid-header">Jump Into the World of Honkai Impact</h1>
            <div class="row-section">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/3xm1kqqN3GQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            
            </div>
            

        </div>

        <div id="feat-section">
            <div class="icon">
                <img src="https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/6/63/White_Comet.png/revision/latest?cb=20180521030059">
            </div>

            <div class="description">
                <h2>Based on the iconic Valkyries of Honkai Impact 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <div class="icon">
                <img src="https://i.pinimg.com/originals/e3/9d/a5/e39da548f5632d1ccfdcad9b54a8c51c.png">
            </div>
            <div class="description">
                <h2>Feel the lightning with stunningly rendered 3D effects</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <div class="icon">
                <img src="https://static.wikia.nocookie.net/houkai3rd/images/e/e6/60712.png/revision/latest?cb=20191118063408">
            </div>
            <div class="description">
                <h2>Bring the Valkyrie team together to protect all that is beautiful in the world</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

        </div>


        <div id="products-section">
            <h2 class="grid-header">Tech Otakus Save the World!</h2>
            <div id="product-imgs">
                <div class="product-box">
                <img src="https://i.pinimg.com/736x/87/a3/f1/87a3f18e0f4eaa61de4ac3a6b273659d.jpg">
                </div>
                <div class="product-box">
                    <img src="https://cdn.archonia.com/images/1-76856403-1-1-original1/honkai-impact-3rd-pvc-figure-rita-rossweisse-maid-of-celestia-ver-1-8.jpg">
                </div>
                <div class="product-box">
                    <img src="https://cdn.shopify.com/s/files/1/0244/2235/0953/products/STL184688_1200x1200.jpg?v=1611343542">
                </div>
                <div class="product-box">
                    <img src="https://images.goodsmile.info/cgm/images/product/20171114/6866/48702/large/ffc6acbe3bf32e6fd793d5a4ffd34dc4.jpg">
                </div>
                <div class="product-box">
                    <img src="https://cdn02.plentymarkets.com/qozbgypaugq8/item/images/5010/full/STAT-HONKAI008a.jpg">
                </div>
                <div class="product-box">
                    <img src="https://bbts1.azureedge.net/images/p/full/2020/10/4c458d67-de44-46c0-a37f-c45d74bf0b65.jpg">
                </div>
            </div>
            
        </div>

        <div class="column-section">
            <h2>Sign Up to Receive Info From Schicksal HQ</h2>
            <form id="form" action="https://www.freecodecamp.com/email-submit">
                <input type="email" name="email" id="email" placeholder="Enter your email address">

                <input type="submit" name="submit" id="submit">
            </form>
        </div>
    </main>

        

    </body>
</html>

Upvotes: 1

Views: 897

Answers (2)

YourHostNick
YourHostNick

Reputation: 36

It looks to me like you want to do a couple things:

  • Apply the layout sizing to the container element for the image, not the image itself.
  • Define the width of the image as a percentage of the container.

If you define the width of the image as 1600px, it will remain that width even as you zoom out. As the container shrinks, more and more of the image will be hidden by the overflow. Instead You want the image size to change with the container so you do that by sizing the container and then setting the image width to 100%.

If you focus on sizing the block level elements rather than the content that fills them, I think you will end up with a cleaner effect when you zoom out. It's important to remember though that zooming out is not the same as seeing how the content will render on smaller devices. For that, you will want to wrap your head around using media queries to change the sizing and positioning of elements based on screen/viewport breaking points.

#top-head-img {
  display: flex;
  overflow: hidden;
  justify-content: center;
  width: 50% /*or whatever size you are going for */
}

// The image itself should be sized as a percentage of the container element
#top-head-img img {
  width: 100%;
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

Upvotes: 1

Green
Green

Reputation: 544

Try using this:

* {
  font-family: roboto, arial;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0px;
}

h2 {
  font-family: century gothic, verdana, tahoma;
}

p {
  text-align: justify;
}

#main {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

#top-head-img {
  display: flex;
  overflow: hidden;
  justify-content: center;
}

#top-head-img img {
  width: 1600px;
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

#top-head-img img:hover {
  transform: scale(1.1);
}

#header {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0;
  margin: 0;
}

#logo {
  background: #060B24;
  display: grid;
  grid-template-columns: 10% 1fr;
}

#headerImg {
  width: 100%;
  height: 100%;
}

#header-text {
  padding: 0px 10px;
  color: white;
}

#nav-bar {
  background: #060B24;
}

#nav-bar ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 50px;
  justify-items: center;
  align-content: center;
}

#nav-bar li a {
  text-decoration: none;
  color: white;
}

#feat-section {
  display: grid;
  grid-template-columns: 45% 55%;
  grid-template-rows: auto;
  grid-row-gap: 20px;
}

.description {
  width: 100%;
  text-align: justify;
}

.description p {
  text-indent: 20px;
}

.icon {
  display: flex;
  justify-content: center;
}

.icon img {
  width: 100%;
  min-width: 50%;
  align-content: center;
}

#product-imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid-header {
  /*grid-column: 1/4;*/
  text-align: center;
}

.product-box img {
  /*width: 50%;*/
  height: 40vh;
  /*margin-left: 25%;*/
  margin-right: 5px;
}

.column-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.row-section {
  display: grid;
  grid-template-columns: 45% 1fr;
  grid-column-gap: 20px;
}

#video {
  max-width: 100%;
  height: calc(315px*0.7);
}

#email {
  width: 50vw;
  height: 40px;
  border-radius: 10px;
  padding: 10px;
}

#submit {
  background-color: #060B24;
  color: white;
  width: 10vw;
  height: 8vh;
  font-size: 70%;
  text-align: center;
  border-radius: 10px;
  display: block;
  margin: 20px auto;
  padding: 5px;
}

#submit:hover {
  background-color: #3A3849;
}


/*when screening small*/

@media (max-width: 750px) {
  #header {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 0;
    margin: 0;
  }
  #logo {
    background: #060B24;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 4vh;
  }
  #headerImg {
    width: 30%;
    height: auto;
    justify-self: center;
  }
  #header-text {
    margin: 0px 0px !important;
    text-align: center;
    padding: 0px auto;
    align-self: start;
  }
  .product-box img {
    width: 100%;
    margin: 0;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Honkai Impact Merch</title>
  <link rel="stylesheet" type="text/css" href="productstyleFlex.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
  <a name="top"></a>


  <header id="header">
    <div id="logo">
      <img src="https://upload.wikimedia.org/wikipedia/en/d/da/Honkai_Impact_3rd_logo.png" id="headerImg">
      <div id="header-text">
        <p id="header-text">Official Honkai Merch by (not)Mihoyo</p>
      </div>
    </div>


    <nav id="nav-bar">
      <ul>
        <li><a href="#feat-section" class="nav-link">Features</a></li>
        <li><a href="#products-section" class="nav-link">Products</a></li>
        <li><a href="#video" class="nav-link">Video</a></li>
      </ul>
    </nav>
    </div>
  </header>

  <div id="top-head-img">
    <img src="https://uploadstatic-sea.mihoyo.com/bh3/upload/officialsites/201910/pcbanner_1570612871_7480.png">
  </div>

  <main id="main">
    <div>
      <h1 class="grid-header">Jump Into the World of Honkai Impact</h1>
      <div class="row-section">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/3xm1kqqN3GQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      </div>


    </div>

    <div id="feat-section">
      <div class="icon">
        <img src="https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/6/63/White_Comet.png/revision/latest?cb=20180521030059">
      </div>

      <div class="description">
        <h2>Based on the iconic Valkyries of Honkai Impact 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <div class="icon">
        <img src="https://i.pinimg.com/originals/e3/9d/a5/e39da548f5632d1ccfdcad9b54a8c51c.png">
      </div>
      <div class="description">
        <h2>Feel the lightning with stunningly rendered 3D effects</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <div class="icon">
        <img src="https://static.wikia.nocookie.net/houkai3rd/images/e/e6/60712.png/revision/latest?cb=20191118063408">
      </div>
      <div class="description">
        <h2>Bring the Valkyrie team together to protect all that is beautiful in the world</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

    </div>


    <div id="products-section">
      <h2 class="grid-header">Tech Otakus Save the World!</h2>
      <div id="product-imgs">
        <div class="product-box">
          <img src="https://i.pinimg.com/736x/87/a3/f1/87a3f18e0f4eaa61de4ac3a6b273659d.jpg">
        </div>
        <div class="product-box">
          <img src="https://cdn.archonia.com/images/1-76856403-1-1-original1/honkai-impact-3rd-pvc-figure-rita-rossweisse-maid-of-celestia-ver-1-8.jpg">
        </div>
        <div class="product-box">
          <img src="https://cdn.shopify.com/s/files/1/0244/2235/0953/products/STL184688_1200x1200.jpg?v=1611343542">
        </div>
        <div class="product-box">
          <img src="https://images.goodsmile.info/cgm/images/product/20171114/6866/48702/large/ffc6acbe3bf32e6fd793d5a4ffd34dc4.jpg">
        </div>
        <div class="product-box">
          <img src="https://cdn02.plentymarkets.com/qozbgypaugq8/item/images/5010/full/STAT-HONKAI008a.jpg">
        </div>
        <div class="product-box">
          <img src="https://bbts1.azureedge.net/images/p/full/2020/10/4c458d67-de44-46c0-a37f-c45d74bf0b65.jpg">
        </div>
      </div>

    </div>

    <div class="column-section">
      <h2>Sign Up to Receive Info From Schicksal HQ</h2>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input type="email" name="email" id="email" placeholder="Enter your email address">

        <input type="submit" name="submit" id="submit">
      </form>
    </div>
  </main>

  <script>
    window.onscroll = function() {
      scrollFunction();
    };

    function scrollFunction() {
      if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
        headerImg.style.width = "100px";
      } else {
        headerImg.style.width = "200px";
      }
    }
  </script>

</body>

</html>

Upvotes: 0

Related Questions