Question

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

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

此照片显示图像未正确调整大小时会发生什么：

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>

Answer 1

您最好的起点是删除img标签上的任何“宽度”或“高度”属性。如果你想要缩放图像，一个好的规则是拇指在img上使用'max-width：100％'，或者在你的情况下使用'.image6x6'。这样，容器将控制其图像内容的大小。

以下是关于缩放图片http://www.w3schools.com/css/css_rwd_images.asp

的精彩文章

Answer 2

你必须使用Max-width：100％; height：auto;对于图像像这样img {最大宽度：100％;高度：自动;并尝试div Elemet表对于网站脚手架来说是旧的

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

2 个答案: