想要得到一個(gè)高寬相等會自適應(yīng)的圓形

分析一下需求:

  • 首先罐监,寬度應(yīng)該是自適應(yīng)的,我用了bootstrap的柵格化瞒爬,可以用百分比等其他自適應(yīng)方式實(shí)現(xiàn)。
  • 高度與寬度相等。
  • 圓形侧但。

這里的難點(diǎn)在于矢空,高度與寬度相等,我使用了padding屬性禀横。
當(dāng)padding的值的單位是百分比%時(shí)屁药,都是基于父元素的寬度的百分比。
根據(jù)盒子模型:元素的寬度 = 左右邊框 + 左右內(nèi)邊距 + 內(nèi)容寬度

W3C--padding屬性可能的值

W3C--盒子模型

代碼:

<div class="row">
  <div class="col-md-4 border">
    <div class="jf-home-services-wrap"></div>
  </div>
  <div class="col-md-4">123</div>
  <div class="col-md-4">123</div>
</div>
.jf-home-services-wrap {
    width: 100%;
    background: #409eff;
    padding: 50% 0;
    border-radius: 100%;
}
.border {
    border: 1px solid red;
}
高度會隨著寬度的改變而改變
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末柏锄,一起剝皮案震驚了整個(gè)濱河市酿箭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌趾娃,老刑警劉巖缭嫡,帶你破解...
    沈念sama閱讀 211,496評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異抬闷,居然都是意外死亡妇蛀,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評論 3 385
  • 文/潘曉璐 我一進(jìn)店門笤成,熙熙樓的掌柜王于貴愁眉苦臉地迎上來评架,“玉大人,你說我怎么就攤上這事炕泳∽莸” “怎么了?”我有些...
    開封第一講書人閱讀 157,091評論 0 348
  • 文/不壞的土叔 我叫張陵培遵,是天一觀的道長挣磨。 經(jīng)常有香客問我,道長荤懂,這世上最難降的妖魔是什么茁裙? 我笑而不...
    開封第一講書人閱讀 56,458評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮节仿,結(jié)果婚禮上晤锥,老公的妹妹穿的比我還像新娘。我一直安慰自己廊宪,他們只是感情好矾瘾,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,542評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著箭启,像睡著了一般壕翩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上傅寡,一...
    開封第一講書人閱讀 49,802評論 1 290
  • 那天放妈,我揣著相機(jī)與錄音北救,去河邊找鬼。 笑死芜抒,一個(gè)胖子當(dāng)著我的面吹牛珍策,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播宅倒,決...
    沈念sama閱讀 38,945評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼攘宙,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拐迁?” 一聲冷哼從身側(cè)響起蹭劈,我...
    開封第一講書人閱讀 37,709評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎线召,沒想到半個(gè)月后铺韧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,158評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡灶搜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,502評論 2 327
  • 正文 我和宋清朗相戀三年祟蚀,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片割卖。...
    茶點(diǎn)故事閱讀 38,637評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡前酿,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鹏溯,到底是詐尸還是另有隱情罢维,我是刑警寧澤,帶...
    沈念sama閱讀 34,300評論 4 329
  • 正文 年R本政府宣布丙挽,位于F島的核電站肺孵,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏颜阐。R本人自食惡果不足惜平窘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,911評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望凳怨。 院中可真熱鬧瑰艘,春花似錦、人聲如沸肤舞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽李剖。三九已至芒率,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間篙顺,已是汗流浹背偶芍。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評論 1 266
  • 我被黑心中介騙來泰國打工充择, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人腋寨。 一個(gè)月前我還...
    沈念sama閱讀 46,344評論 2 360
  • 正文 我出身青樓聪铺,卻偏偏與公主長得像化焕,于是被迫代替她去往敵國和親萄窜。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,500評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案撒桨? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color查刻,font,text-align凤类,li...
    wzhiq896閱讀 1,732評論 0 2
  • Bootstrap是什么穗泵? 一套易用、優(yōu)雅谜疤、靈活佃延、可擴(kuò)展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 10,861評論 3 184
  • 一:在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過程中夷磕,你是如何考慮他的UI履肃、安全性、高性能坐桩、SEO尺棋、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,141評論 0 1
  • 日子在一天天流逝,每一天都是不一樣的绵跷。自己消沉了很久膘螟,有的時(shí)候,也真的是很無奈碾局。那又怎么樣呢荆残,日子還是要這樣子過。
    honyer閱讀 300評論 0 0