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

问题描述 投票：0回答：3

我正在尝试使用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;
}

我尝试使用图像上的类设置每个图像的宽度，但是这不起作用我也尝试设置宽度和高度到div类但是这不起作用当我检查HTML时，我得到的错误是“未知的财产名称“

请帮我解决这个问题。

html css image height width
3个回答
0
投票

在bootstrap 4中调用默认图像类img-fluid以进行响应。 （可选）将box 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>
0
投票

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

所以你的代码应该是这样的：

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

如果要将图像宽度调整为父元素并使其保持响应，请使用以下命令：

.box {
  width: 100%;
  height: auto;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.