Сделать из прямоугольного изображение круглое в css
Дано прямоугольное изображение в макете, которое необходимо сделать круглым. Обернул в див, обрезал края, но подвинуть, как на макете, не выходит..Проблема со сдвигом изображение в этом кругу. Может есть фича на Бутстрап какая, мало ли..
.item < margin-left: 150px; >.photo < width: 132px; height: 132px; margin: 0 auto; overflow: hidden; >.personPhoto
Круглые изображения
Любые растровые изображения сами по себе прямоугольны, поэтому для создания сложной формы в картинках применяют прозрачность или фон, совпадающий с фоном веб-страницы. Действительно круглые изображения можно сделать с помощью стилевого свойства border-radius . К таким изображениям применяется рамка через border и она тоже будет круглой, а не квадратной. Если круглую картинку вставить в , то областью ссылки будет круг.
Чтобы сделать произвольное изображение круглым вначале следует превратить его в квадрат, а затем в стилях добавить свойство border-radius со значением 50% (пример 1). Лучше задавать именно в процентах, так мы не привязываемся к размерам картинок.
Пример 1. Круглые изображения
Результат данного примера показан на рис. 1.
Рис. 1. Круглые изображения
border-radius применяется к любым другим элементам, поэтому мы можем создать пустой квадратный и установить для него фоновую картинку, которую допустимо масштабировать и сдвигать. Само изображение не обязательно должно быть квадратным, потому что оно будет вписано в область заданных размеров. Всё, что не поместится в эту область, будет обрезано. На рис. 2 показана фотографии для добавления её на веб-страницу.
Рис. 2. Фотография акулы
Теперь устанавливаем эту фотографию как фон для класса round , задаём размеры элемента и настраиваем масштаб изображения (пример 2).
Пример 2. Круглый элемент
Результат данного примера показан на рис. 3. Фон по умолчанию устанавливается в левом верхнем углу, так что сдвигаем его на 70 пикселей влево, чтобы акула оказалась в центре круга.
Рис. 3. Круглое изображение
См. также
- border-radius
- Оформление кнопок
Как сделать закругление картинки с одной стороны на css?
Как сделать вот такое закругление снизу фото, как на картинке с помощь. CSS?
- Вопрос задан более трёх лет назад
- 6258 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 3
а есть слово верстальщица?
border-top-left-radius — для верхнего левого угла;
border-top-right-radius — для верхнего правого угла;
border-bottom-left-radius — для нижнего левого угла;
border-bottom-right-radius — для нижнего правого угла (в твоем случае)
Ответ написан более трёх лет назад
Нравится 5 2 комментария
balex777 @balex777 Автор вопроса
в углу получается закругление, как убрать ?
я сделал так
border-bottom-right-radius: 1500px 90px;
Первое значение устанавливает радиус по горизонтали, а второе — радиус по вертикали, попробуй с ними поиграть или вообще оставить только одно значение) А вообще, я бы их точно уменьшила на твоем месте
Как добавить скругленные уголки у фотографии фиксированного размера?
Кроссбраузерно установить скруглённые уголки у фотографий, размер которых известен и задан.
Решение
Если на сайте применяется группа фотографий одинаковой ширины и высоты, то для них достаточно просто можно установить скругленные уголки. Принцип состоит в том, что поверх каждой фотографии накладывается рисунок, который прячет под собой часть фотографии, образуя тем самым желаемые уголки.
Вначале следует подготовить изображение с уголками. В графическом редакторе создаем прозрачную основу и заливаем уголки цветом, совпадающим с цветом фона веб-страницы. На рис. 1 показано изображение размером 120х120 пикселов, назовем его round.png . Шахматное поле обозначает прозрачность, а уголки отмечены темным цветом.
Рис. 1. Изображение с уголками для наложения на фотографию
Далее создаем слой, в который добавляем два изображения — фотографию и картинку с уголками. Для управления положением уголков тегу следует добавить уникальный класс или поместить его внутрь контейнера , как показано в примере 1. Позиционирование основного блока должно быть задано относительным ( position : relative ), а внутреннего с уголками — абсолютным ( position : absolute ).
Пример 1. Создание фотографии с уголками
HTML5 CSS 2.1 IE Cr Op Sa Fx
Скругленные уголки 