Как сделать круглое изображение в WordPress с помощью CSS

Второй вариант — то чего мы хотим добиться — круглое изображение, миниатюра. И так, идем далее, для начала нам нужно открыть код страницы, я буду показывать на примере браузера Google Chrome:

Для этого кликаем правой кнопкой мыши по нужном нам объекту — картинке в ленте новостей, либо нажимаем сочетание клавиш Ctrl I (для Google Chrome).

Как сделать круглое изображение в WordPress с помощью CSS

 

Практически в любом шаблоне WordPress, изображения заключаются в специальный div:

Как сделать круглое изображение в WordPress с помощью CSS

Ищем нужное название класса которое мы будем редактировать, в нашем случае класс называется «post-thumbnail».

Далее идем в файл стилей — style.css, лежит в корне папки выбранной вами темы, ищем класс  post-thumbnail img — приставка img будет обозначать, что атрибуты будут заданы для изображения внутри слоя.

Для того, чтобы добиться скругления как было показано на картинке в начале поста — добавляем еще одно свойство border-radius: 50% — мы добавили скругление изображения на 50%.

Как видите все просто и понятно, для оформления красивой округлой миниатюры можно смело использовать код выше.

Оставить комментарий

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