×

Японские стихи и прозаТайны историиСтрашное и мистическоеСтихи Серебренного векаСтихи Золотого векаСредневековьеСказки народов мираРодом из сссрРаскраскиПсихологияПритчиОригамиМузыкаМифы и Легенды древнего мираМистика и ГаданияЛучшие статьиКонвертерыКомедия "Дино и его друзья"ЖизненноеДревняя АзияГрустные вещиВыборгБасниАфоризмы и цитатыАнекдоты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.



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




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

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


Теперь, давайте попробуем скруглить края у прямоугольной картинки с неодинаковыми длинной и шириной.
В этом случае нам придется с помощью 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
По раскаленной гальке или песку женщина идет на цыпочках. Мужчина наступает только на пятки.Уши женщины затыкают пальцами, а мужчины — ладонями.

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




Шокирующий факт о сфинксах в Петербурге
Удаляем ссылки из текстового файла с помощью Notepad++






×

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