img class =＆＃34;圆圈＆＃34;是不是在asp.net中创建一个圆形的圆圈

Question

我在asp.net mcv应用程序中使用bootstrap。我希望图像是圆形的。因此使用＆＃34; img class =＆＃34;圆圈＆＃34;。代码如下。

  

的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

对于Bootstrap，您应该添加tournament而不是img-circle。请参阅示例here试一试。