CODEWITHSUNDEEP
htmlcss
Jacob
Jacob

Reputation: 659

resize images when the webpage's window is resized

I can't resize the images correctly inside the table when the web page is resized.

I've tried changing the width and height using the % but I don't know how to solve this problem! Can someone help me?

This photo shows what happens when the images don't resize correctly:

enter image description here

body {
  width: 99%;
  height: 100%;
  background-color: #EFEFEF;
}
table {
  border-spacing: 10px;
}
img {
  border-radius: 18px;
  border: 4px solid black;
}
.headerBackground {
  width: 100%;
  height: 400px;
  background-image: url(E:/Workspace/Sviluppo_Pagine_Internet/Blog/Blog_Images/AGGIUSTATE/UBUNTU.png);
  background-size: 101% 149%;
  background-repeat: no-repeat;
  background-color: black;
  border: 3px solid black;
  border-radius: 20px;
}
.mainTable {
  margin-top: 5%;
  width: 44%;
  height: 44%
}
.td6x6 {
  width: 100%;
  height: 100%;
}
.td3x3 {
  width: 100%;
  height: 100%;
}
.image6x6 {
  width: 100%;
  height: 70%;
}
.image3x3 {
  width: 97%;
  height: 70%;
}
.footer {
  border: 3px solid black;
  border-radius: 20px;
  background-color: black;
  width: 100%;
  height: 100px;
  text-align: center;
  margin-top: 3%;
}
<!DOCTYPE html>
<html>

<head>

  <link type="text/css" rel="stylesheet" href="mainPage.css" />

  <title></title>
</head>

<body>


  <div class="headerBackground"></div>


  <center>
    <table class="mainTable">

      <tr>

        <!--PRIMA  CELLA-->

        <td class "td6x6">
          <a href="E:\Workspace\Sviluppo_Pagine_Internet\Blog_Minimal\BlogPage.html">
            <img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\Blog.png" class="image6x6">
          </a>
        </td>


        <!--SECONDA  CELLA-->

        <td class "td6x6">
          <a href="https://github.com/user" target="GitHub">
            <img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\GitHub.png" class="image6x6">
          </a>
        </td>

      </tr>


      <tr>


        <!--TERZA  CELLA-->

        <td class "td6x6">


          <table style="border-spacing: 5px;">
            <tr>
              <td class "td3x3">
                <a href="mailto:user">
                  <img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\Email.png" class="image3x3" style="height: 67%">
                </a>
              </td>


              <td class "td3x3">
                <a href="https://www.linkedin.com/in/user" target="Linkedin">
                  <img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\Linkedin.png" class="image3x3">
                </a>
              </td>
            </tr>

            <tr>
              <td class "td3x3">
                <a href="https://www.facebook.com/user" target="Facebook">
                  <img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\Facebook.png" class="image3x3">
                </a>
              </td>



              <td class "td3x3">
                <a href="https://www.instagram.com/user/" target="Instagram">
                  <img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\Instagram.png" class="image3x3">
                </a>
              </td>
            </tr>
          </table>

        </td>


        <!--QUARTA  CELLA-->


        <td class "td6x6">
          <a href="E:\Workspace\Sviluppo_Pagine_Internet\Blog_Minimal\AboutPage.html">
            <img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\About.png" class="image6x6">
          </a>
        </td>


      </tr>


    </table>
  </center>



  <!--FOOTER-->

  <div class="footer">

    <h3 style="text-align: center; color: blue; font-size: 120%; padding-top: 1%">EMAIL</h3>

  </div>





</body>

</html>

Upvotes: 0

Views: 44

Answers (2)

T. Mavu
T. Mavu

Reputation: 11

your best starting ground would be to remove any 'width' or 'height' properties on the img tag. If you would like the image to scale, a good rule a thumb would be to use 'max-width: 100%' on the img, or in your case '.image6x6'. this way, the container will control the size of its image content.

Here is a good article on scaling images http://www.w3schools.com/css/css_rwd_images.asp

Upvotes: 1

Naci
Naci

Reputation: 5

you Must use Max-width:100%;height: auto; for images Like this img {Max-width:100%;height: auto; } and try div Elemet tables are old for Website scaffolding

Upvotes: 0

Related Questions