html - 请教一个前端css问题。
天蓬老师
天蓬老师 2017-04-17 14:50:07
[HTML讨论组]

有一个圆形的p,假设直径为200px .现在我要放一张图片在这个圆里面,正常情况下我设置图片的宽高为100%。
如图:
黑色边框是p圆,边框为图片。

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

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

图片在圆里完全显示。

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(3)
高洛峰

哦,根据勾股定理,内部方框p的宽度为圆p宽度的 1/1.414

PHPz

background的话可以试试

background-size:调整大小;
background-position:center center居中;

如果是<img/>的话
除了使用

img{
    transform-origin: center center;
    transform:scale(.1);
}

还是得自己算。

ringa_lee

下面称正方形为子元素, 圆形为父元素.

如果是固定像素的子元素直接写死宽高像素, 再定位即可.
安利一个昨天写的web中的垂直居中, 多种方法实现垂直居中.

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号