Итак, я видел на некоторых сайтах, где будет отображаться изображение профиля пользователей, вместо изображения неконкретного заполнителя появляются инициалы пользователей.Письма с несколькими изображениями, которые остаются отзывчивыми
Я решил попробовать и реализовать это на одном из моих сайтов, но я изо всех сил, чтобы держать его в ответ.
Мне нужно железо жесткое решение, просто не имея фактического изображения с каждой комбинацией инициалов, хранящихся на бэкэнде где-то.
Теперь это изображение профиля может отображаться в нескольких местах на экране, поэтому абсолютное позиционирование, как показано на многих руководствах, не является вариантом.
«решение» я придумал использует следующие классы CSS:
.profile-image img.with-initials {
position: relative;
left: -10px;
width: 30px;
}
.profile-image .initials {
position: relative;
bottom: 2px;
left: 50%;
margin: 0 auto;
float: left;
z-index: 100;
}
.profile-image span.initials {
color: #efefef;
font-weight: 600;
font-size: 150%;
line-height: 35px;
letter-spacing: 1px;
}
В дополнение к этому я проверяю, чтобы увидеть первым, имеет ли пользователь изображение профиля, и если не я добавляю эти классы к образцу пустой заставки с вычисленными инициалами.
Все это прекрасно подходит для конкретного размера экрана, но, к сожалению, разваливается, как только вы начинаете изменять размер окна.
Вы пытались масштабировать шрифты и изображения с помощью единиц просмотра? Также было бы хорошо, если бы вы могли опубликовать какой-то HTML или демонстрацию. – sol
http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container отзывчивый размер шрифта, основанный на ширине контейнера, который не является видовым экраном, должен быть решением 'js', попробуйте что-то вроде fittext.js. – haxxxton