Неизвестное имя свойства (невозможно изменить размер изображений с помощью CSS) - PullRequest
Новая
       46

Неизвестное имя свойства (невозможно изменить размер изображений с помощью CSS)

0 голосов
/ 15 марта 2019

Я пробовал блочную модель с помощью начальной загрузки, и изображения не менялись, поэтому я попытался изменить ее размер с помощью 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, я получаю сообщение об ошибке «неизвестное имя свойства»

Пожалуйста, помогите мне решить эту проблему.

Ответы [ 3 ]

0 голосов
/ 15 марта 2019

Если вы хотите подогнать ширину изображений к родительскому элементу и сохранить их отзывчивость, используйте это: 

.box {
  width: 100%;
  height: auto;
}
0 голосов
/ 15 марта 2019

В bootstrap 4 вызовите класс изображения по умолчанию img-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>
0 голосов
/ 15 марта 2019

Вы не можете использовать = в CSS. Измените его на :.

Итак, ваш код должен выглядеть так: 

.box{
  display: block;
  width: 300px;
  height: 300px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...