img class = "rounded-circle"はasp.netで丸い円を作成していません

Question

私はasp.net mcvアプリケーションでブートストラップを使用しています。私はイメージを丸くしたい。したがって、コードは以下である。 "IMGクラスは=" 丸く円」を使用。

index.htmlを

@{ 
ViewBag.Title = "Home Page"; 
} 

<h1 class="my-4"> 
    About Us 
    <small>It's Nice to Meet You!</small> 
</h1> 

<div class="row"> 
    <div class="col-lg-12"> 
    <h2 class="my-4 text-center">Our Services</h2> 
    </div> 

    <div class="col-lg-4 col-sm-6 text-center mb-4"> 
    <a href="Application/Search"> 
     <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/search.png" alt=""> 
    </a> 
    <h3>Search App</h3> 
    <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> 
    </div> 

    <div class="col-lg-4 col-sm-6 text-center mb-4"> 
    <a href="Application/TTS"> 
     <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/text-to-speech.png" alt=""> 
    </a> 
     <h3>Text-to-Speech</h3> 
     <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> 
    </div> 

    <div class="col-lg-4 col-sm-6 text-center mb-4"> 
    <a href="Application/SpeechRecognition"> 
     <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/speech-recognition.jpg" alt=""> 
    </a> 
     <h3>Speech Recognition</h3> 
     <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> 
    </div> 

    <div class="col-lg-4 col-sm-6 text-center mb-4"> 
    <a href="Application/VAvatar"> 
     <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/virtual-avatar.jpg" alt=""> 
    </a> 
     <h3> Virtual Avatar</h3> 
     <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> 
    </div> 

    <div class="col-lg-4 col-sm-6 text-center mb-4"> 
    <a href="Application/VAvatar"> 
     <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/text-to-speech.png" alt=""> 
    </a> 
     <h3>John Smith</h3> 
     <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> 
    </div> 

    <div class="col-lg-4 col-sm-6 text-center mb-4"> 
    <a href="Application/VAvatar"> 
     <img class="rounded-circle img-fluid d-block mx-auto" src="~/Images/text-to-speech.png" alt=""> 
    </a> 
     <h3>John Smith</h3> 
     <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> 
    </div> 

これは、それが

どのように見えるかであります上記のコードは丸められたイメージを与える必要がありますが、それでも正方形ですなぜですか？

Answer 1

ブートストラップの場合、 img-circleを追加し、rounded-circleを追加しないでください。サンプルhereを試してみてください。