Как динамически подгонять шрифт css

Подогнать ширину текста под ширину картинки при помощи CSS

Приветствую сообщество. Задача: есть картинка неизвестной ширины. Под ней располагается текстовый блок, который должен быть такой же ширины, как и картинка. Проблема легко решается, если задать жесткий размер охватывающего DIV по ширине в пикселях. Но дело в том, что не известен размер картинки, которая будет загружена. Можно ли сделать это без применения JS или серверных манипуляций с картинкой, только средствами CSS?

Саратовская фракция серча ( ). Давайте посчитаемся.
На сайте с 08.08.2005
30 марта 2010, 07:29

Консультация по данному вопросу стоит денег! Надо бы зарядить по максимуму, но неизвестно сколько денег на WMZ кошельке ТС. Можно ли угадать сколько денег у него на кошельке без применения JS или серверных манипуляций с картинкой, только средствами угадывания? В переводе это означает — хочу то не знаю что! Ибо с тот же браузер это программа! Которая сама не думает, она берет что дают! Если ей ничего не дать (ширина текста = размер картинки) то и выровнять по нему текст (вогнать в тот же размер) она не сможет.

На сайте с 25.07.2009
30 марта 2010, 08:42
Наверное коряво вопрос формулирую. Вот css:

div.small-screenshot <
width: 200px;
display: inline-block;
vertical-align: top;
>

Текст под картинкой произвольной длины, который нужно выровнять, чтобы ширина столбца этого текста соответствовала ширине картинки.

Этот html код используется на нескольких страницах. Картинка samle.png на разных страницах может быть разной ширины. Как избавиться от фиксированного указания ширины в 200px в css, и устанавливать ширину дива динамически, в зависимости от ширины текущего samle.png?

На сайте с 18.05.2004
30 марта 2010, 08:55

malls:
Если ей ничего не дать (ширина текста = размер картинки) то и выровнять по нему текст (вогнать в тот же размер) она не сможет

может=))) просто все на дивах и стилях помешались

картинка
текст

T.R.O.N добавил 30.03.2010 в 12:56
malls:
В переводе это означает — хочу то не знаю что!
на вопрос с множественной выборкой, всегда дается ответ с вариациями. =))))))

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)

Как менять размер текста при изменении размера окна?

Для изменения размера текста веб-страницы совместно с окном браузера есть несколько методов. Рассмотрим наиболее популярные.

Использование единиц vw

Размер текста задаётся с помощью свойства font-size, в качестве значения можно указывать разные единицы — пиксели, пункты, миллиметры и др. Единица vw (от англ. viewport width — ширина области просмотра) соответствует 1% от ширины окна браузера, таким образом, при изменении этой ширины будет меняться и размер текста (пример 1).

Пример 1. Использование vw

Результат данного примера показан на рис. 1.

Рис. 1. а — текст на широком окне; б — текст на узком окне

У единицы vw есть несколько недостатков — главное, что текст уменьшается пропорционально вместе с окном и в какой-то момент становится нечитаемым. Это будет особенно заметно на смартфонах, где ширина экрана меньше ширины мониторов. Чтобы установить минимальный размер текста можно воспользоваться функцией calc(), как показано в примере 2.

Пример 2. Использование calc()

Здесь мы смешиваем разные единицы — для заголовка rem и vw, для основного текста пиксели и vw. Использование calc() гарантирует, что текст не станет меньше указанного значения (для заголовка, к примеру, это 1rem).

Использование функции clamp()

Функция clamp() устанавливает рекомендованное, минимальное и максимальное значения для какого-либо свойства, в частности, font-size . Это позволяет задать диапазон, в котором будет меняться размер нашего текста. К примеру, следующая запись говорит, что текст абзаца не должен быть меньше 0.75rem, не должен быть больше 2rem, а лучше, если он будет 1rem.

Чтобы размер шрифта плавно менялся вместе с шириной окна, рекомендованное значение следует дополнить единицами vw.

Онлайновый сервис Font-size Clamp Generator позволяет получить параметры clamp() на основе минимальной и максимальной ширины области просмотра (рис. 3).

Рис. 3. Генератор параметров функции clamp()

В примере 3 функция clamp() применяется для заголовка и основного текста.

Пример 3. Использование clamp()

section h2 < font-size: clamp(2rem, 0.5rem + 4vw, 4rem); >section div

Использование медиа-запросов

Поскольку единицы vw завязаны на ширину области просмотра, то при увеличении размера окна увеличивается и размер текста. Иногда требуется сделать наоборот — на маленьких экранах показывать большой текст, а на больших экранах, соответственно, маленький текст. Для этого применяются медиа-запросы, они меняют стиль элементов при определённой ширине окна браузера.

Сперва определяем стиль для больших экранов, затем с помощью конструкции @media screen and (max-width: 1024px) задаём стиль для экранов с шириной до 1024 пикселей. Внутри @media пишется размер текста под этот размер. При желании ниже добавляем ещё несколько @media с разными значениями max-width (пример 4).

Пример 4. Использование @media

Размер текста в данном случае будет меняться не плавно, а ступенчато — при достижении указанной ширины окна размер текста уменьшается или увеличивается.

См. также

• @media
• font-size
• Единицы размера в CSS
• Размер текста
• Свойства шрифта в CSS
• Функция calc()
• Функция clamp()
• Функция max()
• Функция min()

CSS. Как масштабировать div вместе с содержимым под высоту экрана?

Но как сделать чтобы уровень масштабирования устанавливался сам соответственно высоте экрана? Я пробовал делать так:

.my_div

Но тогда масштабируется только сам div, а контент с текстом и изображениями может вылезать за его пределы (объём контента внутри div непредсказуем). Есть ли способ использовать нечто условно вроде вот такого:

zoom: 100vh; 

? Дополнение: Я хотел использовать медиа-запросы, но насколько я понял, они просто возвращают мне ответ «да» или «нет» на мой вопрос о том, попадает ли текущая высота или ширина окна в некий указанный мной диапазон, например 500px. Допустим я получил ответ, что высота экрана меньше 500px.
И как мне это поможет?
Указать для каждой высоты экрана определённое значение zoom ? Но я не могу заранее предсказать каков будет контент блока, а значит и какова будет его высота, а значит и какое значение zoom мне использовать чтобы блок идеально вписался в окно браузера. Мне нужно найти способ динамического изменения свойства CSS ‘zoom’, при котором блок my_div будет масштабироваться (уменьшаться или увеличиваться) под текущую высоту экрана вместе со всем содержимым (размер текста также должен масштабироваться). Я подозреваю что на чистом CSS это сделать не выйдет.

Авторазмер textarea по содержимому с помощью CSS

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

// Зеркальный div функционирует как отражение для мяча — всегда готов поддержать document.querySelector('.auto-expand').addEventListener('input', function() < document.querySelector('.mirror-text').textContent = this.value; this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'; >);