在調整網頁窗口大小時調整圖像大小

當網頁大小調整後，我無法在表格內正確調整圖像大小。在調整網頁窗口大小時調整圖像大小

我試過改變寬度和高度使用％，但我不知道如何解決這個問題！有人能幫我嗎？

這張照片顯示的圖像時，不正確地調整大小會發生什麼：

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>

來源

2016-03-28 Jacob

好的文章你有什麼班「image6x6」和「td6x6」？ –