Я использовал border-radius: 50% или border-radius: 999em, но проблема одна и та же: с квадратными изображениями нет проблем, но с прямоугольными изображениями я получаю овальный круг. Я также склонен обрезать часть изображения (очевидно). Есть ли способ сделать это с помощью чистого CSS (или, по крайней мере, JavaScript/jQuery), без использования <div> с background-image, но только с помощью тега <img>?
Как сделать прямоугольное изображение круговым с CSS
Ответ 1
Я предполагаю, что ваша проблема с 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;
}
Ответ 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>
Ответ 3
Для тех, кто использует Bootstrap 3, у него отличный класс CSS для выполнения этой задачи:
<img src="..." class="img-circle">
Ответ 4
вы можете сделать только круг из квадрата с помощью радиуса границы.
border-radius не увеличивает или не уменьшает высоты и ширину.
Ваш запрос должен использовать только тег изображения, это не возможно, если тег не является квадратом.
Если вы хотите использовать пустое изображение и установить другое в bg, это будет болезненно, один фон для каждого установленного изображения.
Обрезка может выполняться только в том случае, если для этого используется обертка. В этом случае у вас есть много способов сделать это.
Ответ 5
Вы можете сделать это так:
<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>
Ответ 6
Я изучал эту же проблему и не мог найти достойное решение, отличное от того, что div с изображением в качестве фона и тегом img внутри него с видимостью нет или что-то вроде этого.
Одна вещь, которую я могу добавить, - добавить в div div background-size: cover, чтобы ваше изображение заполнило фон, отсекая его лишнее.
Ответ 7
Основываясь на ответе от @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>
Ответ 8
Это хорошо работает, если вы знаете высоту и ширину:
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
Ответ 9
<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>