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

概述我有一个方形图像,我想把它放在一个圆形边框内.我怎样才能使整个图像适合而不是切角？ .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图像？所遇到的程序开发问题。

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