如何使矩形图像呈现出CSS的圆形
我已经使用border-radius: 50%或border-radius: 999em ，但问题是一样的：平方图像没有问题，但与矩形图像我得到一个椭圆形的圆。 我也倾向于裁剪图像的一部分（显然）。 有没有办法做到这一点与纯CSS（或至lessJavaScript / jQuery），而不使用<div> background-image ，但只使用<img>标签？
我认为你的问题与background-image是一个样式表内的每个图像的源效率低下 。 我的build议是设置内联源：
<div style = 'background-image: url(image.gif)'></div> div { background-repeat: no-repeat; background-position: 50%; border-radius: 50%; width: 100px; height: 100px; }
小提琴
我的2cents，因为唯一的答案评论变得有点疯狂。 这是我通常做的。 对于一个圆圈，你需要从一个正方形开始。 这个代码强制一个正方形，并将拉伸图像。 如果你知道图像将至less是圆形div的宽度和高度，你可以删除img样式规则，以使其不被拉伸，而只是被切断。
<html> <head> <style> .round { border-radius: 50%; overflow: hidden; width: 150px; height: 150px; } .round img { display: block; /* Stretch height: 100%; width: 100%; */ min-width: 100%; min-height: 100%; } </style> </head> <body> <div class="round"> <img src="image.jpg" /> </div> </body> </html>
对于那些使用Bootstrap 3的人来说，它有一个很棒的CSS类来完成这个工作：
<img src="..." class="img-circle">
您只能使用边框半径从正方形变成圆形。
边界半径不增加或减less高度和宽度。
您的要求是只使用图像标签，如果标签不是正方形，基本不可能。
如果你想使用一个空白的图像，并设置另一个BG，这将是痛苦的，每个图像设置一个背景。
裁剪只能通过包装来完成。 在这种情况下，你有很多方法来做到这一点
你可以这样做：
<html> <head> <style> .round { display:block; width: 55px; height: 55px; border-radius: 50%; overflow: hidden; padding:5px 4px; } .round img { width: 45px; } </style> </head> <body> <div class="round"> <img src="image.jpg" /> </div> </body>
我一直在研究这个相同的问题，找不到一个体面的解决scheme，除了与图像的div作为背景和img标签里面的可见性没有或类似的东西。
我可能会添加的一件事是，您应该添加一个background-size: cover的div，以便您的图像填充背景通过剪裁是多余的。
build立在@fzzle的答案 – 从一个矩形实现一个圆， 而没有定义一个固定的高度或宽度 ，下面的工作。 填充顶部：100％保持1：1比例的圆形裁剪div。 设置一个内嵌背景图像，居中，并使用background-size：cover来隐藏多余的内容。
CSS
.circle-cropper { background-repeat: no-repeat; background-size: cover; background-position: 50%; border-radius: 50%; width: 100%; padding-top: 100%; }
HTML
<div class="circle-cropper" style="background-image:url(myrectangle.jpg);"></div>
如果你知道高度和宽度，这个效果很好：
img { object-fit: cover; border-radius: '50%'; width: 100px; height: 100px; }
通过https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87
<html> <head> <script src="jquery-1.11.0.min.js"></script> <style> .round_img { border-radius: 50%; max-width: 150px; border: 1px solid #ccc; } </style> <script> var cw = $('.round_img').width(); $('.round_img').css({ 'height': cw + 'px' }); </script> </head> <body> <img class="round_img" src="image.jpg" alt="" title="" /> </body> </html>
