如何在圆形边框内放置方形HTML图像?

如何在圆形边框内放置方形HTML图像?,第1张

概述我有一个方形图像,我想把它放在一个圆形边框内.我怎样才能使整个图像适合而不是切角? .circle { width: 200px; height: 200px; border: 1px solid black; border-radius: 100px; background-image: url('http://upload.wikimedia.org/w 我有一个方形图像,我想把它放在一个圆形边框内.我怎样才能使整个图像适合而不是切角?

.circle {    wIDth: 200px;    height: 200px;    border: 1px solID black;    border-radius: 100px;    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png');    background-size: contain;   }

这是jsfiddle.

解决方法 您需要稍微缩小图像以使其适合圆圈.要计算确切的大小,请将圆的直径除以sqrt(2).在这种情况下,200px / sqrt(2)约为141px.

因此,添加以下属性:

background-size: 141px;background-repeat: no-repeat;background-position: 50%;

JSFiddle

请注意,蓝色块不会触及圆圈,因为图像具有透明边框.

更新:作为cassiorenan correctly points out,如果更改圆的大小,使用百分比可以使图像自动缩放.由于1 / sqrt(2)= 0.707 …,您可以使用70.7%而不是141px:

background-size: 70.7%;
总结

以上是内存溢出为你收集整理的如何在圆形边框内放置方形HTML图像?全部内容,希望文章能够帮你解决如何在圆形边框内放置方形HTML图像?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/1082683.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存