在Boostrap中使用img-circle保持完美圓圈

好的，這似乎是一個有很多潛在解決方案的問題，但沒有一個能夠滿足我想要的工作。即使底層圖像不是一個完美的圓圈，我總是希望顯示完美的圓圈。但是，我不想通過px指定圖像維度，因爲我希望它具有響應性。看起來無論我嘗試哪種解決方案，這些圈子總是會變成橢圓形，或者圖片尺寸完全接管並使其變得龐大。在Boostrap中使用img-circle保持完美圓圈

HTML：

<div class='item-image'> 
    <img class='img-circle img-responsive img-center' src='#' /> 
</div>

目標：

無論圖像尺寸（矩形）的，我想要的圖像的紅色圓圈下面的部分顯示出來。

來源

2016-01-17 bryanx

什麼是框圈下？，你可以更好地描述你到底要什麼？ –

對不起，代表圖片。我只想顯示圈子裏的內容。 – bryanx

做到這一點，最好的辦法是每覆蓋。並用CSS創建圈子！

<div class="wrapper"> 
    <img src="#" class="img-responsive"> 
    <div class="circle"></div> 
</div>

.wrapper有position: relative和.circle具有position: absolute和border-radius: 100%。

包裝必須與inline-block定位。用text-align: center居中包裝。

中心的絕對定位的元素如下：

.el { 
    position: absolute; 
    top: 50%; 
    margin-top: -(height/2)%; 
    left: 50%; 
    margin-left: -(width/2)%; 
}

如果你想圓內的圖像，使圓更大。

Example

來源

2016-01-17 19:42:12 Sun

HTML：在後臺

<div class="circle"> 
</div>

和使用CSS圖片：

.circle{ 
     border: 2px solid red; 
     width: 200px; 
     height: 200px; 
     border-radius:100%; 
     background-image: url('') 
    }

檢查fiddle

來源

2016-01-17 19:31:04

在Boostrap中使用img-circle保持完美圓圈

回答

相關問題