Question

当我将代码内的最大宽度更改为50px时，为什么该图像无法调整大小？

我尝试过：将显示设置为阻止还做的类，然后添加img以使其更具体

这是html和css，图像只是wash.png

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Powerwashing</title>

</head>
<body>
  <div class="wrapper">

    <div>
      <div class="header">
        <ul>
          <li><a class="a" href="#">About us</a></li>
          <li><a class="s" href="#">Services</a></li>
          <li> <a class="l"href="#"></a><img src="wash.png" alt="Powerwashing services">
          </a>
          </li>
          <li><a class="w" href="#">Why us</a></li>
          <li><a class="c" href="#">Contact us</a></li>

        </ul>
      </div>
    </div>
  </div>

这里有CSS：`* {

  margin:0px;
  padding:0px;
}

.wrapper{
  display: grid;

}
.header ul{
  list-style-type: none;
  background-color: green;
  padding:20px;
  text-align: center;

  display:grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-areas:
     "a s l w c";


}
.header a{
  background-color: red;



}
a .a{
  grid-area:a;
}
a .s{
  grid-area:s;
}
a .l{
  grid-area: l;

}
a .w{
  grid-area:w;
}
a .c{
  grid-area:c;
}
`

有人知道这里的问题吗？

图片忽略最大宽度

0 个答案: