×

Вокруг мира турцияКрымпро сссрТайны историитунисВыборгПоследние новостиПетербург и окрестностифакты и мирОбщество, мирСтрашное и мистическое
Интересно Анекдотыуроки по 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
Средний экваториальный диаметр Луны равен 3474,8 километра и составляет 27,24 процента земного. Площадь лунной поверхности составляет 7,4 процента от площади земной поверхности, а объем Луны - всего 2 процента от объема Земли. Масса Луны составляет 1,23 процента от массы Земли.

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






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






×

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