html - 請(qǐng)教一個(gè)前端css問(wèn)題。
問(wèn)題描述
有一個(gè)圓形的p，假設(shè)直徑為200px .現(xiàn)在我要放一張圖片在這個(gè)圓里面，正常情況下我設(shè)置圖片的寬高為100%。如圖：黑色邊框是p圓,邊框?yàn)閳D片。
這樣的話圖片的四個(gè)角就會(huì)背裁掉。
有辦法用最簡(jiǎn)單的辦法做到這樣的效果么？
圖片在圓里完全顯示。
問(wèn)題解答
回答1：將圖片作為p的背景圖片，以這樣的格式設(shè)置即可background: url(’img.png’) center/70.7106% no-repeat;
哦，根據(jù)勾股定理，內(nèi)部方框p的寬度為圓p寬度的 1/1.414
回答3：background的話可以試試
background-size:調(diào)整大小；background-position:center center居中；
如果是<img/>的話除了使用
img{ transform-origin: center center; transform:scale(.1);}
還是得自己算。
回答4：下面稱(chēng)正方形為子元素, 圓形為父元素.
如果是固定像素的子元素直接寫(xiě)死寬高像素, 再定位即可.安利一個(gè)昨天寫(xiě)的web中的垂直居中, 多種方法實(shí)現(xiàn)垂直居中.
回答5：<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title>Test</title> <style> p { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; border: 1px solid black; border-radius: 100px; } img { width: 142px; height: 142px; } </style></head><body><p> <img src='https://sf-sponsor.b0.upaiyun.com/551dc6c4459ccb476719307a36070815.png'></p></body></html>
相關(guān)文章：
1. css3 - transform的順序不同為何會(huì)使元素的形狀不同。2. python - 速度最快的啟動(dòng)界面GUI3. javascript - 在頁(yè)面最頂部插個(gè)廣告，怎么做才能不破壞頁(yè)面布局（不影響下面的內(nèi)容）？4. css - 如何選擇字體？5. css3 - css before作為父級(jí)元素的背景色遮住了文字怎么辦？6. python - 如何把152753這個(gè)字符串轉(zhuǎn)變成時(shí)間格式15:27:537. javascript - js判斷一個(gè)數(shù)組是否重復(fù)8. python - 關(guān)于beautifulsoup獲取文檔內(nèi)容9. html5 - video ios不能播放怎么辦？10. mysql - 類(lèi)似于之類(lèi)的通知系統(tǒng)如何設(shè)計(jì)數(shù)據(jù)庫(kù)
網(wǎng)公網(wǎng)安備