您的位置：首页技术文章
文章详情页

html - 请教一个前端css问题。

浏览：259日期：2023-01-21 13:57:12

问题描述

有一个圆形的p，假设直径为200px .现在我要放一张图片在这个圆里面，正常情况下我设置图片的宽高为100%。如图：黑色边框是p圆,边框为图片。html - 请教一个前端css问题。

这样的话图片的四个角就会背裁掉。

有办法用最简单的办法做到这样的效果么？

html - 请教一个前端css问题。

图片在圆里完全显示。

问题解答

回答1：

将图片作为p的背景图片，以这样的格式设置即可background: url(’img.png’) center/70.7106% no-repeat;

html - 请教一个前端css问题。

回答2：

哦，根据勾股定理，内部方框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>

html - 请教一个前端css问题。

标签： HTML
上一条：html5 - svg标签如何兼容IE8下一条：html5 - video ios不能播放怎么办？
相关文章：
1. $fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题2. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）3. javascript - 用表单提交两个时间段请求后台返回对应数据时出现的一些问题！4. angular.js - angularjs的自定义过滤器如何给文字加颜色？5. mysql - SQL操作时间的函数?6. java - mybatis怎么实现在数据库中有就修改,没有就添加7. 正则表达式 - python pandas的sep参数问题8. MYSQL新建用户设置可以远程访问的问题9. docker内创建jenkins访问另一个容器下的服务器问题10. docker api 开发的端口怎么获取？
排行榜
$fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题
$fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题
1. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）
2. javascript - 用表单提交两个时间段请求后台返回对应数据时出现的一些问题！
3. angular.js - angularjs的自定义过滤器如何给文字加颜色？
4. java - mybatis怎么实现在数据库中有就修改,没有就添加
5. 正则表达式 - python pandas的sep参数问题
6. docker内创建jenkins访问另一个容器下的服务器问题
7. mysql - SQL操作时间的函数?
8. MYSQL新建用户设置可以远程访问的问题
9. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因？
10. docker api 开发的端口怎么获取？
热门标签