html - 請教一個前端css問題。
問題描述
有一個圓形的p，假設直徑為200px .現在我要放一張圖片在這個圓里面，正常情況下我設置圖片的寬高為100%。如圖：黑色邊框是p圓,邊框為圖片。
這樣的話圖片的四個角就會背裁掉。
有辦法用最簡單的辦法做到這樣的效果么？
圖片在圓里完全顯示。
問題解答
回答1：將圖片作為p的背景圖片，以這樣的格式設置即可background: url(’img.png’) center/70.7106% no-repeat;
哦，根據勾股定理，內部方框p的寬度為圓p寬度的 1/1.414
回答3：background的話可以試試
background-size:調整大小；background-position:center center居中；
如果是<img/>的話除了使用
img{ transform-origin: center center; transform:scale(.1);}
還是得自己算。
回答4：下面稱正方形為子元素, 圓形為父元素.
如果是固定像素的子元素直接寫死寬高像素, 再定位即可.安利一個昨天寫的web中的垂直居中, 多種方法實現垂直居中.
回答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>
相關文章：
1. python - django 里自定義的 login 方法，如何使用 login_required()2. python如何不改動文件的情況下修改文件的 修改日期3. angular.js - angularjs 用ng-reapt渲染的dom 怎么獲取上面的屬性4. angular.js - 不適用其他構建工具，怎么搭建angular1項目5. mysql優化 - mysql count(id)查詢速度如何優化?6. 主從備份 - 跪求mysql 高可用主從方案7. css3 - [CSS] 動畫效果 3D翻轉bug8. node.js - node_moduls太多了9. mysql主從 - 請教下mysql 主動-被動模式的雙主配置 和 主從配置在應用上有什么區別？10. java8中，邏輯與 & 符號用在接口類上代表什么意思
![css3 - [CSS] 動畫效果 3D翻轉bug](http://www.cgvv.com.cn/attached/image/news/202304/110831f073.png)
網公網安備