События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

Самые жестокие люди в истории мира


Самые глубокие места в мире


Часовая башня выборга. Белая башня.


Что делать, чтобы вас ненавидели на работе или в вузе?


нереализованный проект ссср. самый большой перекресток в мире. Площадь Конституции


Нубозавр - легенда о Герое волчёнке. Часть1.


Почему в Англии левостороннее движение?


Игра про СССР. Workers & Resources Soviet Republic Обзор, скачать игру торрент.


Голубой город. Сиди-Бу-Саид. Тунис.


Кнопка "открыть текст", которая скрывает часть текста, а после нажатия открывает.


Мистические места Петербурга. Загадки.



“В России быть евреем престижно, это как избранность. Могут, конечно, и в морду дать при случае, но с другой стороны, все знают: ты не простой человек, ты – еврей.”

Неизвестный автор

Следующая цитата »

Это факт!


 Самая кусачая собака в мире — немецкая овчарка. За ней идут чау-чау и колли. Самые некусачие собаки — золотистый ретривер, пудель и чихуахуа.

Следующий факт »

Ра оставил тебе послание!... (0о0)

Как сделать круг в 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.




ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

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



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)