如何使矩形图像呈现出CSS的圆形

我已经使用border-radius: 50%border-radius: 999em ,但问题是一样的:平方图像没有问题,但与矩形图像我得到一个椭圆形的圆。 我也倾向于裁剪图像的一部分(显然)。 有没有办法做到这一点与纯CSS(或至lessJavaScript / jQuery),而不使用<div> background-image ,但只使用<img>标签?

9 Solutions collect form web for “如何使矩形图像呈现出CSS的圆形”

我认为你的问题与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="//code.jquery.com/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> 

http://jsfiddle.net/suryakiran/1xqs4ztc/

  • 有一个前景等同于背景图像在CSS?
  • 有什么理由不开始使用HTML 5的文档types?
  • HTML - select文件名后显示图像
  • 加载和执行一个网页的顺序?
  • 是否有可能使HTML锚点标签不可点击/链接使用CSS?
  • 在android中解码HTML实体
  • 在Notepad ++中格式化代码
  • 为什么我需要一个文档types? (它是做什么的)
  • 将DIValignment到底部或基线
  • 你可以风格有序的列表号码?
  • 如何使用jQueryselect下拉列表中的第一个元素?