Как скруглить картинку css
Перейти к содержимому

Как скруглить картинку css

  • автор:

Как закруглить углы изображения на CSS без Фотошопа

Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.

Вебмастера повсеместно используют скругленные углы у блоков и рамок на сайтах. Я в этой статье расскажу как же закруглить углы у картинок и фотографий на сайте без использования сторонних программ, только с помощью CSS.

Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.

Закругление углов у блоков DIV

По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius, например так:

border-radius: 10px;

Для наглядности нарисуем два блока с прямыми и скругленными углами:

Блок с прямыми углами
Блок с закругленными углами

Закругление углов у картинок

По аналогии с примером выше можно закруглить углы и у картинок на сайте, например фотографий. Для наглядности закруглим углы для фотографии со страницы https://moonback.ru/page/shinomontazh

Вот изображение без CSS обработки

А теперь с загругленными углами:

border-radius: 10px;

Чтобы стало совсем «красиво» с начала добавим окантовку…

border-radius: 10px; border: 5px #ccc solid;

border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;

Вариант ниже (закругленные углы с тенью без бордюра) очень похож на коврик для мыши:

border-radius: 10px; box-shadow: 0 0 10px #444;

И напоследок полное издевательство над изображением

border-radius: 50%; border: 5px #cfc solid; box-shadow: 0 0 10px #444;

Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки CSS стилей вашим браузером.

Маленькое лирическое отступление

Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px, то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.

А стиль box-shadow не влияет на размер картинки, тень как бы наезжает на соседние элементы. При его использовании верстка сайта не страдает.

Как закруглить углы картинок на WordPress

Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:

Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой. В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю. Вы можете дополнить один из них вышеуказанными параметрами.

Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:

.alignnone

Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG:

Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!

Вместо заключения

Все примеры в статье условные и призваны лишь продемонстрировать некоторые возможности CSS по обработки изображений и показать как это просто.

Как скруглить картинку в контейнере с border-radius?

Не получается скруглить картинку в контейнере с border-radius. Как это можно пофиксить?

  • Вопрос задан более трёх лет назад
  • 1344 просмотра

Комментировать
Решения вопроса 2

Zorner

Можете прописать на класс .card
или img .
Если хотите скруглить только верхную часть картинки, тогда img

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

Brad9aga

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 2

border-radius: 20px; самой картинке да и все)
Вы же пытаетесь скруглить див где лежит картинка, а не смогу картинку)

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

megapihar6

Сергей Карвасарный @megapihar6

если хочешь через блок то нужно блоку указать overflow: hidden он обрежет картинку тогда или просто сделать бордер картинке)

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Дробит бекграунд при использовании margin?

  • 1 подписчик
  • 11 часов назад
  • 33 просмотра

Как сделать закругленные углы css

как скруглить углы картинки

Сегодня я расскажу и покажу как сделать закруглённые углы при помощи css. Ещё совсем недавно закруглённые углы на сайтах делались исключительно при помощи картинок, то есть нужно было заранее подготовить картинку в фотошопе или другой аналогичной программе, закруглить для неё углы так как вам нужно, а потом разместить её на сайте.

Навигация по статье:

  • Как закруглить углы для блока?
  • Как закруглить углы картинки при помощи CSS?
  • Куда вставлять CSS код?
  • Как ещё можно закруглить углы при помощи CSS?

Но к счастью эти времена остались позади и сегодня сделать закруглённые углы для любого блока, картинки, кнопки или таблицы можно при помощи одной строчки CSS кода.

Причём вы можете закруглить углы как все сразу, так и только некоторые, да ещё и регулировать для них радиус закругления.

Как, например, здесь:

закруглить углы картинки

Круто, не правда ли?!
Всё это стало возможным благодаря CSS свойству border-radius.

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

.round-corner < height : 100px ; width : 200px ; background : #2F73B6 ;

А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:

border-radius: 20px;

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

Радиус закругления может задаваться как в пикселях, так и в процентах.
border-radius: 10%;

И вот что мы получим в итоге:

Сразу предупреждаю, что старые версии старые версии браузера Internet Explorer, а также некоторые мобильные браузеры не понимают этого CSS свойства и отображают углы незакруглёнными.

Как закруглить углы картинки при помощи CSS?

Такой же фокус можно проделать и для картинки, кнопки и практически любого элемента на вашем сайте. Для того чтобы закруглить углы в CSS нужно либо прописать для этого элемента класс, для которого задано свойство border-radius, либо вычислить класс блока, внутри которого расположен нужный элемент (в нашем случае это картинка), а затем прописать тег этого элемента, после чего в фигурных скобках прописать ему всё тоже CSS свойство border-radius.

Для картинки CSS код будет выглядеть так:

Настоящее скругление углов картинок на клиенте

О скруглении углов в html-верстке сказано уже столько, что я пойму тех кто прочитав заголовок иронично улыбнется и подумает «опять 25, ну сколько можно. ». Поэтому я постараюсь кратко изложить суть, и сразу предупрежу, что этот метод вы едва ли могли видеть раньше.

Задача

Если коротко, то задача была не имитировать скругление углов под определенный фон и с определенной рамкой, а реализовать реальное скругление углов изображения, не зависимо от фона и размеров картинки, с возможностью задавать любую рамку и радиус скругления. Конечно же это должно работать во всех браузерах, включая IE6.

Процесс решения

Чтож, задача на первый взгляд просто нереальная и очень долго я даже не пытался ее решить, каждый раз вырезая под определенный фон уголки определенного радиуса и накладывая их сверху картинки. Но как-то раз я решил серьезно взяться за этот вопрос со всем упорством и всеми своими знаниями в области верстки.

Начал я с того что «по-честному» скруглить прямоугольную картинку, выколов углы, может только CSS3-свойство border-radius, пока забудем что оно не поддерживается в IE6-8.

И так, берем картинку неизвестного размера и применяем к ней border-radius:

* This source code was highlighted with Source Code Highlighter .

.b-img-radius border: 1px solid #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
>

* This source code was highlighted with Source Code Highlighter .

Совсем не то что надо, рамка живет своей жизнью, изображение своей. Попробуем по другому, положим картинку на фон inline-block элемента, но придется задавать ему размер картинки.

* This source code was highlighted with Source Code Highlighter .

Уже лучше, скругление работает, но указывать размеры совсем не хочется, поэтому вставляем внутрь нашего inline-block элемента эту же картинку без указания размеров и скрываем через visibility: hidden; таким образом она будет распирать наш блок с бэкграундом до нужного размера.

* This source code was highlighted with Source Code Highlighter .

.b-img-radius zoom: 1;
position: relative;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
vertical-align: top;
>

.b-img-radius img display: block;
visibility: hidden;
>

* This source code was highlighted with Source Code Highlighter .

На первый взгляд некрасиво дублировать путь к картинке но я считаю это того стоит, тем более раз этот элемент универсальный то его вполне можно вынести в отдельный контрол/хелпер в вашем проекте и код станет красивым.

А что же IE?

Все до банальности просто. Есть очень мощная библиотека CSS3 Pie которая реализует на VML многие CSS3 свойства для IE6-8, включая border-radius, она невероятно проста и весит всего 28кб. Все что нам нужно это добавить в CSS строчку:

* This source code was highlighted with Source Code Highlighter .

IE6 легко с этим справляется и не подтормаживает даже если таких элементов на странице больше 10. А главное что добавление VML-объектов никак не сказывается на кликабельности картинки. Например мы можем сделать ее ссылкой просто заменив div на a:

* This source code was highlighted with Source Code Highlighter .

Итог

В результате мы получили что хотели, элемент остается инлайновым как обычная картинка, не нуждается в указании размеров картинка сама займет столько места сколько нужно, мы можем гибко менять радиус скругления углов, задавать или не задавать рамку любого размера и цвета через CSS, а главное не думать о том на какой фон ложится картинка, и еще, внимание(!), можно задавать тень через box-shadow что тоже будет работать в IE6++!

Кроссбраузерность: IE6++ и все современные версии FF, Opera, Chrome, Safari.

Этот компонент идеально подойдет тем кто верстает независимыми блоками, добавив его себе в набор, вы сильно упростите себе жизнь.

Буду рад ответить на любые ваши вопросы, коллеги.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *