css實現(xiàn)背景圖片等比例縮放

在實際工作中,怎樣實現(xiàn)給標簽的添加的背景圖片,能像img標簽一樣,可以等比例縮放呢,今天就跟大家說一個巧方法,即通過padding填充的方法,其中padding-bottom的值是圖片的寬高的百分比。

具體代碼如下:

<div style="width: 100%;height: 0px;padding-bottom:64.375%;height:0px!important;">

<div style="background:url('333.png') #151515 center 0 no-repeat;background-size:100% 100%;padding-bottom:64.375%"></div>

</div>




代碼比較簡單,希望對大家有幫助。。。。。。。。。。。。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,160評論 1 92
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,126評論 0 2
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,441評論 0 11
  • 使用純 CSS 實現(xiàn) 500px 照片列表布局 文章很長,因為介紹了如何一步一步進化到最后接近完美的效果的,不想讀...
    HZ充電大喵閱讀 2,782評論 0 4
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進階之旅閱讀 16,878評論 32 459

友情鏈接更多精彩內(nèi)容