我在asp.net mcv应用程序中使用bootstrap。我希望图像是圆形的。因此使用" img class ="圆圈"。代码如下。
的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>
上面的代码应该给出一个圆形图像。但它仍然是正方形。这是为什么?