Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.
Изначально мы имеем картинку, на которой расположен в нужном месте текст, который не перекрывает определенные ее части.
Все величины у этой конструкции выставлены для размера блока в 1170 пикселей.
Пример с точными размерами:
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.fontsize { position: relative; } .fontsize img { width: 100%; } .fontsize .text { width: 100%; position: absolute; font-family: 'Roboto', sans-serif; color: #337AB7; font-size: 48px; top: 40px; left: 130px; } |
HTML
|
1 2 3 4 |
<div class="fontsize"> <div class="text">Размер шрифта</div> <img src="font-size.jpg" /> </div> |
Текст отлично расположен в блоке, но если ширина экрана увеличится или уменьшится, то становится видно, что шрифт перекрывает волны или просто не умещается в заданном блоке.
Чтобы правильно изменять размер шрифта воспользуемся примером ниже, в котором используется небольшой JS
Пример с размерами через JS:
HTML и CSS у нас остаются прежние (в CSS можно удалить лишнее, это свойства font-size, top и left, которые мы задаем через JS)
JS
|
1 2 3 4 5 6 7 8 9 10 |
function fontsize() { let block = document.querySelector('.fontsize'); let text = document.querySelector('.fontsize .text'); let w = block.offsetWidth; text.style.fontSize = w/24 + "px"; text.style.top = w/38 + "px"; text.style.left = w/9 + "px"; } window.onload = fontsize; window.onresize = fontsize; |
Теперь если блок изменит свои размеры, текст это сделает тоже в соответствии с нужными пропорциями, которые устанавливаются на глаз.
Если ширина блока равна ширине экрана, то можно обойтись без JS и установить все размеры исходя из него.
Пример с размерами на CSS, если ширина блока равна экрану:
HTML для этого примера остается прежним, JS нам не нужен, а размеры в CSS будет такими:
|
1 2 3 4 5 |
.fontsize .text { font-size: 4vw; top: 4vw; left: 12vw; } |
Где размер текста и его позиция также устанавливаются на глаз на любом разрешении экрана.
Смотрите также:
Вариант оформления списка в трехмерном стиле, используя всего один класс
jQuery плагин matchHeight, делающий высоту заданных блоков одинаковой
Варианты оформления закрывающих кнопок (close button) на CSS
У Вас в последнем примере текст уменьшается вместе с картинкой. Подскажите пожалуйста, как добиться, чтобы текст уменьшался вместе с картинкой?
Не понял чего нужно добиться...
как добиться, чтобы
В Вашем примере, при растягивании экрана, параллельно растягивается не только сам текст, но и фоновое изображение на котором находится текст. Т.е. изображение становится меньше. Оно не обрезается, а именно уменьшается. Мне нужно добиться подобного результата в следующей ситуации:
У меня на сайте используется, например, слайдер (обложка) с некоторыми изображениями, заголовком и подзаголовком. В моем случае, при адаптации на разных экранах изображение обрезается, а не параллельно уменьшается в зависимости от размера экрана. Собственно я хочу добиться того же результата, что и в вашем примере "Пример с размерами на CSS, если ширина блока равна экрану"
Тут нужно смотреть как у вас установлен фон слайдера.
В примере это просто картинка шириной 100%, у вас скорее всего это фон.
Тут 2 варианта:
1 - задать для фона background-size: contain; - фон будет всегда умещаться в контейнере (слайде)
2 - задать пропорцию для слайдера и соотв. всех слайдов, например: aspect-ratio: 16 / 9;
aspect-ratio: 16 / 9; - то что доктор прописал!
Благодарю))
Скорее всего у вашего слайдера фиксированная высота, например 500px, а ширина 100% , и в таком варианте пропорция всегда будет меняться, в зависимости от ширины.
Удалите высоту эту и поставьте нужную пропорцию aspect-ratio
Если не получится, дайте ссылку, скажу что где прописать.
У меня пара вопросов
1 - почему на примере размер шрифта в 4vw показывается в пикселях
2 - зачем вообще нужен JS, когда можно всегда считать по этой ширине экрана?
1 - пример не всегда у меня показывает тот код, который дается, иногда я его меняю для удобства и наглядности. В этом случае там показывается 4vw, но значение указано в пикселях, чтобы видеть его реальный размер.
2 - Блок не всегда может быть связан с шириной экрана, например на 1200 точках справа может быть колонка еще и наш блок будет шириной 700px, а на разрешении 900 точек наш блок может и прибавиться даже, т.к. колонка скроется или пойдет ниже.