如何使矩形图像显示为圆形的CSS [英] How to make rectangular image appear circular with CSS

问题描述

我已使用 border-radius：50％或 border-radius：999em 相同：使用平方图像没有问题，但是对于矩形图像，我获得一个椭圆形。我也处置了裁剪图像的一部分（显然）。有没有办法用纯CSS（或至少JavaScript / jQuery），而不使用< div> 与 background-image


解决方案 / div>

我假设你在 background-image 中的问题是：对于一个样式表中的每个图像，它的效率会低于 。我的建议是设置来源内联：

 < div style ='background-image：url（image.gif） >< / div> 
 
 div {
 background-repeat：no-repeat; 
 background-position：50％; 
 border-radius：50％; 
 width：100px; 
 height：100px; 
} 
  

小提琴

I've used border-radius: 50% or border-radius: 999em, but the problem is the same: with squared images there's no problem, but with rectangular images I obtain an oval circle. I'm also disposed to crop a part of the image (obviously). Is there's a way to do that with pure CSS (or at least JavaScript / jQuery), without using a <div> with a background-image, but only using the <img> tag?

解决方案

I presume that your problem with background-image is that it would be inefficient with a source for each image inside a stylesheet. My suggestion is to set the source inline:

<div style = 'background-image: url(image.gif)'></div>

div {
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

Fiddle

这篇关于如何使矩形图像显示为圆形的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！