Question

我使用了border-radius: 50%或border-radius: 999em，但问题是一样的：对于平方图像没有问题，但是对于矩形图像，我获得了一个椭圆形圆圈。我也准备裁剪图像的一部分（显然）。有没有使用纯CSS（或至少JavaScript / jQuery）的方法，而不使用<div> background-image但只使用<img>标记？< / p>

Answer 1

我认为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;
}

Fiddle

Answer 2

我的2点因为对唯一答案的评论变得有点疯狂。这就是我通常做的事情。对于圆形，您需要从正方形开始。此代码强制一个正方形并将拉伸图像。如果您知道图像至少是圆形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>

Answer 3

对于那些使用Bootstrap 3的人来说，它有一个很棒的CSS类来完成这项工作：

<img src="..." class="img-circle">

Answer 4

你只能使用border-radius从正方形制作圆圈。

border-radius不会增加或减少高度或宽度。

您的请求仅使用图片代码，如果代码不是正方形，则基本上不可能。

如果你想使用空白图像并在bg中设置另一个图像，那么每个图像的设置背景都会很痛苦。

只有在有包装的情况下才能进行裁剪。在这种情况下，你有很多方法可以做到这一点

Answer 5

基于@fzzle的答案 - 要从矩形获得圆圈而不定义固定的高度或宽度，以下内容将起作用。填充顶部：100％与圆形裁剪器div保持1：1的比例。设置内嵌背景图像，居中，并使用背景大小：覆盖以隐藏任何多余的。

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" role="img" style="background-image:url(myrectangle.jpg);"></div>

Answer 6

你可以这样做：

    <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>

Answer 7

如果您知道高度和宽度，这个效果很好：

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

Answer 8

以下为我工作：

CSS

.round {
  border-radius: 50%;
  overflow: hidden;
  width: 30px;
  height: 30px;
  background: no-repeat 50%;
  object-fit: cover;
}
.round img {
   display: block;
   height: 100%;
   width: 100%;
}

HTML

<div class="round">
   <img src="test.png" />
</div>

Answer 9

我一直在研究这个同样的问题，找不到一个像样的解决方案，除了将图像作为背景和其中的img标签，其中可见性无或类似的东西。

我可能会添加的一件事是你应该在div中添加一个background-size: cover，这样你的图像就可以通过削减它来填充背景。

Answer 10

<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显示矩形图像为圆形

10 个答案: