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. javascript - swiper.js嵌套了swiper 初始设置不能向下一个滑动 结束后重新初始2. 为什么span的color非要内联样式才起作用？3. angular.js - angular-ui-bootstrap 报错无法使用？4. docker - 如何修改运行中容器的配置5. python - 如何修改twisted自带的日志输出格式?6. 请问一下各位老鸟 我一直在学习独孤九贱 现在是在tp5 今天发现 这个系列视频没有实战7. 老师，请问我打开browsersync出现这个问题怎么解决啊？8. 求救一下，用新版的phpstudy，数据库过段时间会消失是什么情况？9. html5 - H5做的手机分享页微信更新后，分享出去不再默认显示第一个图 作为缩略图10. 高并发写入和更新mysql
网公网安备