×

Вокруг мира Страшное и мистическоеПетербург и окрестностиТайны историитурцияКрымпро сссрПоследние новоститунисОбщество, мирфакты и мирВыборг
Интересно Мистика и ГаданияМузыкаАнекдотыуроки по 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)