Bootstrap img-responsive不工作？

Question

我只是在學習前端開發。 我想告訴我為什么img-responsive不起作用。 這是我的代碼。 是的，如果我正在做其他一些不良做法，請告訴我。

HTML：

<div class="container-fluid">
  <div class="background">
 <div class="row">
  <div class="col-xs-12 col-md-12">
    <h1 class="text-center heading">H.G Wells</h1>
  <hr>  
     </div> 
        </div>
  <div class="row">
   <div class="col-xs-12 col-md-6 col-lg-6"> 
     <div id="word1">
       <h2 class="text-center">Father of Science friction books</h2>
       <div class="img-responsive img-rounded">
       <img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Grateful_Dead_-_Jerry_Garcia.jpg" alt="HGWells" >
     </div>
     </div>
    </div>  
</div>
</div>
</div>

CSS

body{
  top-margin:60px;
}
.heading{
  font-size:400%;
}
.background{
  background-color:lightgrey;
  margin-top:5rem;
}
#word1{
  margin-top:1rem;
  margin-bottom:1rem;
  color:black;
}

Answer 1

類img-responsive img-rounded繼續使用img元素，而不是div

例如：

<img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Grateful_Dead_-_Jerry_Garcia.jpg" alt="HGWells"  lass="img-responsive img-rounded">`

Answer 2

您使用的是哪個版本的Bootstrap？ 如果您使用的是版本4，則會將其更改為img-fluid ：

<img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Grateful_Dead_-_Jerry_Garcia.jpg" alt="HGWells" class="img-fluid img-rounded">