在我的專案中，我使用了 bootstrap v.5 卡。我想讓影像成為一個完美的圓形，我使用了 bootstrap 但輸出影像呈橢圓形。這是我的代碼
<img src={elonMusk} class="card-img-top rounded-circle" alt={elonMusk} />
我該如何解決這個問題
uj5u.com熱心網友回復：
據我所知，rounded-circle班級只是border-radius:50%. 因此，如果您的影像尺寸不相等（例如 50 x 50）。你不會得到完美的圓圈。
你可以給你的影像一些width并height修復它的尺寸。
喜歡 ：
img:{
width:50px;
height:50px
}
或者
<img id="myImage" src=".." >
#myImage{
width:50px;
height:50px
}
uj5u.com熱心網友回復：
創建您的 css 代碼并洗掉引導程式舍入類。
<img src="elonMusk.png" class="card-img-top" alt="elonMusk">
并在 css 檔案中
img {
border-radius: 50%;
}
使用border-radius 屬性為影像添加圓角。50% 將使影像變為圓形：
uj5u.com熱心網友回復：
在 .css 中：-
img {
border-radius: 50%;
}
更多請點擊此鏈接
uj5u.com熱心網友回復：
把高度和寬度相等...
<img src={elonMusk} class="card-img-top rounded-circle" alt={elonMusk}
style={{height:"200px", width:"200px"}} />
uj5u.com熱心網友回復：
您可以使用ratio ratio-1x1預定義類的類Bootstrap-5，如果您的影像不是Square格式，那么您需要撰寫單行 css 代碼，例如object-fit: cover。
.img-cover{
object-fit: cover;
object-position: center;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container py-4">
<div class="row g-4 row-cols-1 row-cols-sm-2 row-cols-md-3">
<div class="col">
<div class="card">
<div class="ratio ratio-1x1 rounded-circle overflow-hidden">
<img src="https://i.stack.imgur.com/fcbpv.jpg?s=256&g=1" class="card-img-top img-cover" alt="Raeesh">
</div>
<div class="card-body">
<h5 class="card-title">Raeesh Alam</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">View More</a>
</div>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
只需使用 Bootstrap 中的卡片組件并更新 Circle 影像的少量代碼。
引導卡組件檔案：https : //getbootstrap.com/docs/5.1/components/card/
已經更新了下面的代碼片段，希望對您有所幫助。謝謝
.card .card-img-top {
height: 140px;
width: 140px;
}<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card" style="width: 18rem;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png" class="rounded-circle card-img-top mt-3 mx-auto img-thumbnail">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408413.html
標籤：