.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图像?所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)