×

Вокруг мира тунисПетербург и окрестностиКрымВыборгОбщество, мирпро сссрПоследние новостиСтрашное и мистическоетурцияТайны историифакты и мир
Интересно уроки по html,css,js,phpМистика и ГаданияАнекдотыМузыка
Исскуство и поэзия БасниСтихи Золотого векаПритчиЯпонские стихи и прозаСтихи Серебренного векаМифы и Легенды древнего мира
Разные эпохи про сссрДревняя АзияСказки народов мираСредневековьеТайны истории
Разное ОригамиКомедия "Дино и его друзья"РаскраскиСтрашное и мистическоеКонвертеры
общество и мир факты и мирАфоризмы и цитатыОбщество, мирПоследние новостиПсихология

-----------

Вашему сайту нужна помощь? Политика конфидициальности Разместить рекламу

Как сделать круг в css или круглую рамку для картинки?


сайт, css, html, скруглить, обрезать, картинка, картинку, обрезка, как сделать, круглую, рамку, изображение, круглое, круг, радиус,

На самом деле сделать круг в css очень просто, стоит лишь поменять значение в border-radius.




<div class="round">круг</div>

<style>
.round{
background:orange;
width:100px;
height:100px;
border:1px solid red;
border-radius:50%;
}
</style>



Как видите мы просто задали одинаковую ширину (width) и длину (height) и увеличили радиус скругления (border-radius) на 50%.
В данном случае главное, чтобы ДЛИНА и ШИРИНА были равны друг другу, иначе получится не ровный круг, а овал.

Теперь, давайте попробуем скруглить края у картинки.
Для начала возьмем ровную картинку с одинаковой длинной и шириной. Картинка квадратная и имеет размер 150px X 150px.

Как сделать круг в css или круглую рамку для картинки?

Ниже делаем её круглой. Если вы хотите, чтобы границы обводки были не видны, то просто замените red на white.

Как сделать круг в css или круглую рамку для картинки?


<img class="roundimg-eample-reading" src="imgdf/menu/rom.png">

<style>
.roundimg-eample-reading{
border:1px solid red;
border-radius:50%;
}
</style>


Теперь, давайте попробуем скруглить края у прямоугольной картинки с неодинаковыми длинной и шириной.
В этом случае нам придется с помощью CSS кода обрезать картинку.
Вот картинка, которую мы будем обрезать:

Как сделать круг в css или круглую рамку для картинки?

Как сделать круг в css или круглую рамку для картинки?



<div class='galsadeamplehhgghhg'>
<img class="roundimg2-eample-reading" src="imgdf/sm1.png">
</div>
<style>
.roundimg2-eample-reading{
width:150px;height:150px;
}

.galsadeamplehhgghhg {
 max-width:150px;
 height:150px;
    position: relative;
    text-align: center;
margin: 15px;
    color: white; 
display: inline-block;
}
.galsadeamplehhgghhg img {width: 100%;
height: 100%;
object-fit: cover;
background:cover;
 
border:1px solid white;border-radius:50%;
}

</style>


Как видите, мы зафиксировали размер картинки в 150 X 150, таким образом сделав её стороны одинаковой длины. После чего, мы с помощью object-fit: cover; и background:cover; - обрезали картинку, оставив лишь середину. Далее нужно скруглять радиус на 50%, чтобы получился круг.
Этот метод достаточно прост, код небольшой и не требует вмешательства java script.



Комментарии

Комментариев пока нет. Оставь тут свой комментарий или анекдот!


Комментарии к посту






Верит в Россию каждый по-своему, и каждый находит в полном противоречий бытии России факты для подтверждения своей веры.

Николай Бердяев


Norway
Кролики могут видеть, что творится у них за спиной, не поворачивая головы.

[ Интересные факты о мире ]






Данные не загружаются (импортируются) в базу данных или импортируются долго. Что делать?
Символы, знаки, значки, спецсимволы, коды
Общество, мир Выборг Последние новости факты и мир Петербург и окрестности тунис Страшное и мистическое Тайны истории турция про ссср Крым






×

Рассказы из категории: Создание сайта (html,css,php,js)