在调整网页窗口大小时调整图像大小

当网页大小调整后，我无法在表格内正确调整图像大小。在调整网页窗口大小时调整图像大小

我试过改变宽度和高度使用％，但我不知道如何解决这个问题！有人能帮我吗？

这张照片显示的图像时，不正确地调整大小会发生什么：

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”？ –