未知属性名称（无法使用 CSS 调整图像大小）

Question

我正在尝试使用 bootstrap 的盒子模型，但图像没有调整大小，所以我尝试使用 CSS:

调整它的大小

HTML 代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="project.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title></title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#"><img width="100px" height="50px" src="file:///C:\Users\KK\Downloads\paladins.jpg" alt="NAH"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="signup.html">Signup <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Blog</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
    <div class="container">
      <h2>The StudyHub project!</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="container">
      <h2>These are our successful students!</h2>
      <div class="container">
        <div class="row">
          <div class="col">
            <img src="https://y4j7y8s9.ssl.hwcdn.net/wp-content/uploads/2015/09/paladins.jpg" alt="" class="box">
          </div>
          <div class="col">
            <img src="https://y4j7y8s9.ssl.hwcdn.net/wp-content/uploads/2015/09/paladins.jpg" alt="" class="box">
          </div>
          <div class="col">
            <img src="https://y4j7y8s9.ssl.hwcdn.net/wp-content/uploads/2015/09/paladins.jpg" alt="" class="box">
          </div>
        </div>
      </div>
    </div>


  </body>
</html>

CSS 代码：

.container{
  background-color: lightblue;
  padding: 1% 10% 1% 10%;
}
.box{
  display: block;
  width = 300px;
  height = 300px;
}

我尝试使用图像上的 class 为每个图像设置宽度，但这没有用我还尝试将宽度和高度设置为 div class 但这没有用当我检查 HTML 时，我得到的错误是 "unknown property name"

请帮我解决这个问题。

Answer 1

您不能在 CSS 中使用 =。将其更改为 :.

因此您的代码应如下所示：

.box{
  display: block;
  width: 300px;
  height: 300px;
}

Answer 2

如果您想使图像宽度适合父元素并保持它们的响应性，请使用此：

.box {
  width: 100%;
  height: auto;
}

Answer 3

在bootstrap4中调用默认图片classimg-fluid进行响应。（可选）将方框 css 更改为 width: 300px;。您必须更正 css 格式。

.container{
  background-color: lightblue;
  padding: 1% 10% 1% 10%;
}
.box{
  display: block;
  width: 300px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="project.css">
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <title></title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"><img width="100px" height="50px" src="file:///C:\Users\KK\Downloads\paladins.jpg" alt="NAH"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="signup.html">Signup <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Blog</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <div class="container">
        <h2>The StudyHub project!</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="container">
        <h2>These are our successful students!</h2>
        <div class="container">
            <div class="row">
                <div class="col">
                    <img src="https://y4j7y8s9.ssl.hwcdn.net/wp-content/uploads/2015/09/paladins.jpg" alt="" class="box img-fluid">
                </div>
                <div class="col">
                    <img src="https://y4j7y8s9.ssl.hwcdn.net/wp-content/uploads/2015/09/paladins.jpg" alt="" class="box img-fluid">
                </div>
                <div class="col">
                    <img src="https://y4j7y8s9.ssl.hwcdn.net/wp-content/uploads/2015/09/paladins.jpg" alt="" class="box img-fluid">
                </div>
            </div>
        </div>
    </div>

</body>

</html>

未知属性名称（无法使用 CSS 调整图像大小）

Unknown property name(Not able to resize images using CSS)

html

css

image

height

width

未知 属性 名称（无法使用 CSS 调整图像大小）

Unknown property name(Not able to resize images using CSS)

html

css

image

height

width

未知属性名称（无法使用 CSS 调整图像大小）