Округлить изображение с помощью style?

Question

Андрей @dyba

Округлить изображение с помощью style?

Занимаюсь оформлением html версии электронного письма. Есть следующий код:
<span><img src="..." /></span>

Добавить style самому img не могу, поскольку тот выводится через шорткод [img]. Пытался округлить так:

<span style="border-radius: 50%;"><img src="..." /></span>

но не сработало :(

Вопрос: существует вообще какой-либо способ округлить изображение, не работая напрямую с самим img?

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

1 комментарий

Подписаться 2 Оценить 1 комментарий

Пригласить эксперта

Ответы на вопрос 3

Комментировать

4 комментария

nagibator_2009 @nagibator_2009

Это email рассылка, там нельзя использовать классы.

Написано более трёх лет назад
Максим Тимофеев @webinar
nagibator_2009, тогда о каком border-radius речь, ведь около 20% почтовиков его не поддерживают, например MS Outlook 07/10/13
А вот с поддержкой style проблем таких нет и вполне нормально будет:
<head> <style type="text/css"> .round > img {border-radius: 50%} </style> </head> <body> <span class="round"><img src="..." /></span> </body>

Да ряд по наплюет на style, но не все и уж точно те что наплюют в том числе не поддержат border-radius в любом его виде. А значит если его (border-radius) и использовать то так.
Написано более трёх лет назад
nagibator_2009 @nagibator_2009

Максим Тимофеев, Я бы просто изображение загрузил уже заокругленным. Самому недавно пришлось разбираться с версткой email рассылок, там очень много подводных камней. Лучше всего использовать фреймворк для этого, конкретно мне нравится от Foundation. Для того чтобы добиться максимальной поддержки, писать стили нужно только в атрибуте style и никак иначе.

Написано более трёх лет назад
Максим Тимофеев @webinar

nagibator_2009, nagibator_2009, кстати очень правильный совет. Для почты проще скругленное изображение. "Верняковый" вариант.

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+4 ещё

Простой
Как записать результаты работы цикла Thymeleaf в переменную JavaScript?
- 1 подписчик
- 8 часов назад
- 35 просмотров
1

ответ
CSS

+1 ещё

Сложный
SVG ломается при стандартной анимации?
- 1 подписчик
- 13 часов назад
- 61 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как зафиксировать блок модального окна бутстра на iphone, чтоб он не прыгал при свайпах?
- 1 подписчик
- вчера
- 51 просмотр
0

ответов
PHP

+2 ещё

Средний
Проблема с отображением данных о городах из таблицы в запросе SQL?
- 1 подписчик
- 08 мая
- 57 просмотров
1

ответ
HTML

+1 ещё

Простой
Как применить nth-child?
- 1 подписчик
- 08 мая
- 93 просмотра
1

ответ
HTML

Простой
Не могу задать ширину таблицы html?
- 1 подписчик
- 07 мая
- 72 просмотра
1

ответ
CSS

+1 ещё

Простой
Daysi UI — изменить цвет, icon навигационного меню?
- 1 подписчик
- 06 мая
- 45 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать так, чтобы содержимое defs работало?
- 1 подписчик
- 06 мая
- 53 просмотра
0

ответов
CSS

Простой
Как удалить все префиксы из css?
- 1 подписчик
- 06 мая
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Выровнить картинку по центру в тексте, чтобы не зависимости всегда была по центру?
- нет подписчиков
- 05 мая
- 100 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Доработать обмен заказами 1с

11 мая 2024, в 00:19

1000 руб./за проект

Разработка сайта (верстка)

10 мая 2024, в 23:51

30000 руб./за проект

Опубликовать приложение в Google play

10 мая 2024, в 23:33

2500 руб./за проект

А вы уверены, что в почте поддерживается данный цсс тег?

Округлите само изображение сразу, возможно даже придется не использовать прозрачность

Answer 1 · 2017-09-03 15:03:57

Lumore @Lumore

Front-end developer

<span style="border-radius: 50%;overflow:hidden"><img src="..." /></span>

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2017-09-03 15:04:28

Максим Тимофеев @webinar

Учим yii: https://youtu.be/-WRMlGHLgRg

используйте css и классы а не style
html:
<span class="round"><img src="..." /></span>
css:
.round > img {border-radius: 50%}

Ответ написан более трёх лет назад

4 комментария

Answer 3 · 2017-09-03 15:15:52

Daniil Eff @Krunker

Начинающий веб-разработчик

<span> <img src="..." style="border-radius: 50%;"> </span>

Если не трогать img вообще, то тогда я не знаю ¯\_(ツ)_/¯

Ответ написан более трёх лет назад

Комментировать

Округлить изображение с помощью style?

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

Минуточку внимания

Войдите на сайт