Как сделать прямоугольное изображение круговым с CSS

Я использовал border-radius: 50% или border-radius: 999em, но проблема одна и та же: с квадратными изображениями нет проблем, но с прямоугольными изображениями я получаю овальный круг. Я также склонен обрезать часть изображения (очевидно). Есть ли способ сделать это с помощью чистого CSS (или, по крайней мере, JavaScript/jQuery), без использования <div> с background-image, но только с помощью тега <img>?

+61
источник поделиться
9 ответов

Я предполагаю, что ваша проблема с background-image заключается в том, что она будет неэффективной с источником для каждого изображения внутри таблицы стилей. Мое предложение - установить источник 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

+55
источник

Мои 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>
+35
источник

Для тех, кто использует Bootstrap 3, у него отличный класс CSS для выполнения этой задачи:

<img src="..." class="img-circle">
+12
источник

вы можете сделать только круг из квадрата с помощью радиуса границы.

border-radius не увеличивает или не уменьшает высоты и ширину.

Ваш запрос должен использовать только тег изображения, это не возможно, если тег не является квадратом.

Если вы хотите использовать пустое изображение и установить другое в bg, это будет болезненно, один фон для каждого установленного изображения.

Обрезка может выполняться только в том случае, если для этого используется обертка. В этом случае у вас есть много способов сделать это.

+4
источник

Вы можете сделать это так:

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

+1
источник

Я изучал эту же проблему и не мог найти достойное решение, отличное от того, что div с изображением в качестве фона и тегом img внутри него с видимостью нет или что-то вроде этого.

Одна вещь, которую я могу добавить, - добавить в div div background-size: cover, чтобы ваше изображение заполнило фон, отсекая его лишнее.

0
источник

Основываясь на ответе от @fzzle - для достижения круга из прямоугольника без определения фиксированной высоты или ширины, будет работать следующее. Верхняя часть: 100% поддерживает соотношение 1:1 для div-круга. Установите встроенное фоновое изображение, центрируйте его и используйте фон-размер: обложка, чтобы скрыть лишнее.

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>
0
источник

Это хорошо работает, если вы знаете высоту и ширину:

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

0
источник
<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/

-2
источник

Посмотрите другие вопросы по меткам или Задайте вопрос