Масштабирование шрифта в зависимости от ширины контейнера

Но что, если контейнер не является окном просмотра (телом)?

Этот вопрос задается в комментарии Алекса под принятым ответом .

Этот факт не означает, что не vwможет быть использован в некоторой степени для размера этого контейнера. Теперь, чтобы увидеть какие-либо изменения, нужно предположить, что контейнер каким-то образом является гибким по размеру. Будь то прямой процент widthили 100% минус поля. Дело становится «спорными» , если контейнер всегда устанавливается, скажем, в 200pxширину — тогда просто установить , font-sizeчто работает для этой ширины.

Пример 1

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

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw;
}

Предполагая, что здесь divявляется потомком body, он имеет 50%ту 100%ширину, которая является размером области просмотра в этом базовом случае. По сути, вы хотите установить, vw

Пример 2

Вы можете помочь в определении размера области просмотра, форсируя вычисления, основанные на этом. Рассмотрим этот пример :

html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50%
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw;
} 

Размер по-прежнему зависит от области просмотра, но по сути настраивается исходя из самого размера контейнера.

Должен ли размер контейнера динамически меняться …

Если размер элемента контейнера заканчивался динамическим изменением его процентного отношения либо через

Возьмите пример № 1 выше. Если бы он divбыл переключен на 25%ширину либо с помощью @mediaJavaScript, либо в то же самое время, font-sizeто необходимо было бы настроить либо в медиа-запросе, либо с помощью JavaScript новый расчет 5vw * .25 = 1.25. При этом размер текста будет таким же, как если бы «ширина» исходного 50%контейнера была уменьшена вдвое от размера окна просмотра, но теперь была уменьшена из-за изменения его собственного процентного расчета.

Вызов

При использовании calc()функции CSS3 стало бы трудно настраивать динамически, поскольку эта функция font-sizeв настоящее время не работает для целей. Таким образом, вы не можете выполнить чистую настройку CSS 3, если ваша ширина меняется calc(). Конечно, небольшая корректировка ширины полей может быть недостаточной, чтобы оправдать любые изменения font-size, поэтому это может не иметь значения.

Пропорциональное масштабирование изображений с атрибутами размерностей

Перевод статьи: How to proportionally scale images that have dimension attributes.
Автор: Roger Johansson.

Способность изображений масштабироваться совместно с их контейнерами является важнейшим моментом отзывчивого веб-дизайна (более того, этот вопрос был актуален еще до того, как понятие «отзывчивый веб-дизайн» вообще существовало). И в этом нет ничего сложного, все, что вам нужно — это установить процентное значение ширины (или максимальной ширины):

Такое форматирование позволяет предотвратить превышение любым из имеющихся на странице img элементов ширины его контейнера. И в ситуации, когда контейнер становится ýже содержащегося в нем изображения, элемент изображение пропорционально уменьшает свою ширину, для того, чтобы быть в рамках контейнера. Все очень просто, не правда ли, однако, есть нюансы.

Если в разметке у элемента изображения имеются контентные атрибуты размерностей (width и height) и вы, используя приведенный выше способ, средствами CSS переопределяете его ширину, высота изображения останется прежней, поскольку ее значение определяется с помощью контентного атрибута элемента. А это, естественно, приведет к искажению изображения.

Простейший способ предотвращения подобной проблемы заключается в исключении атрибутов width и height из разметки элемента. Однако, именно такой способ определения размеров изображения, с помощью контентных атрибутов, наиболее предпочтителен с точки зрения производительности ресурса, поскольку это позволяет снизить время, требуемое браузеру для отображения изображения. Более детально данный вопрос раскрывается в рекомендациях Google по

Итак, мы хотим указывать требуемые размеры наших изображений и в тоже время получить возможность их пропорционального масштабирования. К счастью, такой способ есть, более того, он невероятно прост — необходимо добавить CSS декларацию, переопределяющую явно указанное значение высоты контентным атрибутом в HTML. То есть совместно с max-width нужно использовать height:auto:

img {
max-width:100%;
height:auto;
}

Теперь масштабирование изображений будет происходить без искажений. Наглядный пример пропорционального масштабирования содержащих атрибуты размерностей изображений можно увидеть на этой демо-странице.

Поддержка браузерами.

Даже в нашем, казалось бы простейшем случае, существует пару различий в реализации некоторыми браузерами, на которые необходимо обратить внимание, по крайней мере, если вы заинтересованы в предоставлении гибко изменяющейся по ширине компоновки в IE8 и ниже.

IE7, кстати, выполняет пропорциональное масштабирование изображения независимо от того, указаны ли атрибуты размерностей в разметке и даже в том случае, если вы не используете декларацию height:auto.

Что касается IE8, то для корректного масштабирования изображений, вам, как ни странно, потребуется помимо переопределения установленной в разметке высоты, переопределить и значение ширины. К великой радости, наличие дополнительной декларации width:auto не вызывает никаких проблем в других браузерах. Итак, для пропорционального масштабирования изображений в IE8 вам необходимо использовать следующее правило:

img {
width:auto;
max-width:100%;
height:auto;
}

Post Views: 5 681

Сохранить пропорции элемента div с помощью CSS

Я’вэ нашел способ сделать это с помощью CSS, но вы должны быть осторожны, так как оно может меняться в зависимости от расхода вашего собственного веб-сайта. Я’ве сделано это для того, чтобы вставить видео с постоянной пропорции в ширину часть жидкости из моего веб-сайта.

Скажем, у вас есть встроенное видео, как это:

     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

Тогда вы могли поместить это все внутрь div с помощью «Видео» Класс. Этот видео класс, вероятно, быть жидкость элемент в ваш сайт таким, что сам по себе он не имеет прямого ограничения по высоте, но при изменении размера браузера она будет меняться в ширину по потоку веб-сайте. Это будет элемент, который вы, вероятно, пытаются получить ваш встроенное видео В при сохранении определенного соотношения сторон видео.

Для того чтобы сделать это, я положил изображения перед внедренный объект в графе «Видео» Класс див.

!!! Важной частью является то, что изображение имеет правильные пропорции, которые вы хотите сохранить. Кроме того, убедитесь, что размер изображения не меньше, чем наименьшее вы ожидаете, что они (или то, что вы поддерживаете А. Р.) к вам на основе вашего макета. Это позволит избежать возможных проблем в разрешении изображения, когда это процент-изменяется. Например, если вы хотите сохранить соотношение сторон 3:2, Дон’Т просто использовать 3 пиксела изображения в 2 пикселя. Он может работать при некоторых обстоятельствах, но я не’т протестировали его, и он, вероятно, будет хорошая идея, чтобы избежать.

Вы, вероятно, следует уже иметь минимальную ширину, как это определено для жидкости элементами вашего веб-сайта. Если нет, то это хорошая идея, чтобы сделать так, чтобы избежать рубящих элементов выключен или имеющие перекрытия, когда окно браузера становится слишком мала. Лучше иметь полосу прокрутки в какой-то момент. Самый маленький по ширине должны получить веб-страницу, где-то около ~600 пикселей (включая любые столбцы фиксированной ширины), потому что разрешение экрана не’т приходят меньше, если вы имеете дело с телефоном-дружественные сайты. !!!

Я использую полностью прозрачный PNG, но я не’т действительно думаю, что это заканчивается с нами случится, если ты сделаешь все правильно. Как это:

     <img src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

Теперь вы должны быть в состоянии добавить CSS похожее на следующее:

div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

Убедитесь, что вы также удалить любой явной высоты или декларации ширина в теги Object и embed, которые обычно приходят с копировать/вставить код для вставки.

Как это работает зависит от свойств установки видео класс элемент и элемент, который вы хотите поддерживать определенное соотношение сторон. Он использует способ изображения будет поддерживать правильное соотношение сторон при изменении размера элемента. Он говорит, что остальное в видео-класс элемента для того чтобы принять полное преимущество недвижимости обеспечивается динамическое изображение, заставляя его ширину/высоту 100% видео класс элемента корректируется образ.

Круто, да?

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

background-size — CSS | MDN

Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.

background-size: cover;
background-size: contain;



background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;



background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;



background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;


background-size: inherit;
background-size: initial;
background-size: unset;

Значения

<размер>

Значение <length> позволяет масштабировать размер фонового изображения в заданном измерении. Отрицательный размер не допускается.

<проценты>

Значение <percentage>, которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением background-origin. Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если attachment фона является fixed, область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.

auto

Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции.

contain

Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.

cover

Ключевое слово, обратное contain. Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.

Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.

Предупреждение: Это поведение изменилось в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.

Фоновые изображения, сгенерированные из элементов с использованием -moz-element (en-US) (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.

Предупреждение: Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.

Визуализированный размер фонового изображения затем вычисляется следующим способом:

Если оба атрибута в background-size заданы и различны от auto:

Фоновое изображение отображается в указанном размере.

Если background-size содержит contain или cover:

Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.

Если background-size установлен как auto или auto auto:

Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.

Если background-size содержит один атрибут auto и один не-auto:

Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.

Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

Формальный синтаксис

Если вы указываете градиент в качестве фона и указали background-size, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, background-size: 50%). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.

.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       
       background-size: 25px 50px;
       background-size: 50% 50%;
}

Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер auto с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.

BCD tables only load in the browser

CSS: иллюстрации & подписи

Смотрите также указатель всех приёмов работы.

На этой странице:

Иллюстрации & подписи

Масштабированная модель Эйфелевой башни в Парке Мини-Франция

В HTML5 включен новый элемент для вставки иллюстрации с подписью. (Мы покажем, как сделать тоже самое в HTML4 ниже.)

<figure>
  <p><img src="eiffel.jpg"
   
    alt="Эйфелева башня">
  <figcaption>Масштабированная
    модель Эйфелевой башни в Парке
    Мини-Франция</figcaption>
</figure>

Например, чтобы сместить изображение вправо на расстояние, равное 30% от ширины окружающих абзацев, используйте следующие правила:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

На самом деле, действительно необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.

Масштабирование изображения

Здесь только одна проблема, и она заключается в том, что изображение может быть слишком широким. В этом случае, ширина изображения всегда будет составлять 136 px и иллюстрация будет занимать 30% от окружающего текста. И если вы сузите окно, то изображение может не поместиться и вылезти за рамку (попробуйте!).

Если вы знаете ширину всех изображений в документе, вы можете указать минимальную ширину иллюстрации следующим образом:

figure {
  min-width: 150px;
}

Сен-Тропе и его форт в вечернем солнце

Другой способ — это задать масштаб самого изображения. Именно это мы и сделали с изображением справа. Как вы, возможно, видете, если вы сделаете окно браузера слишком широким, изображения в формате JPEG масштабируются не очень хорошо. Но если это изображение — диаграмма или график в формате SVG, то масштабирование работает просто великолепно. Вот разметка, которую мы использовали:

<figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="Сен-Тропе">
  <figcaption>Сен-Тропе и его форт в
    вечернем солнце</figcaption>
</figure>

А вот таблица стилей:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
img.scaled {
  width: 100%;
}

И в дополнение последнее правило: этот приём делает изображение настолько широким, насколько позволяет пространство внутри иллюстрации (область внутри рамок и отступов — border и padding).

Размещение подписи сверху

Средиземное море около Кап Ферра

HTML позволяет элементу figcaption быть либо первым, либо последним элементом внутри иллюстрации. Если не применять каких-либо правил CSS, это приведёт к тому, что подпись будет размещена либо над иллюстрацией, либо под ней соответственно.

Однако, независимо от разметки текста, вы можете указать в CSS, чтобы подпись появилась либо над изображением, либо под ним. Этого можно достичь, указав браузеру, что изображение должно быть отформатировано как таблица, в которой картинка является единственной ячейкой, а подпись становится заголовком таблицы. Просто добавьте эти правила в таблицу стилей из предыдущей секции:

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
}

Стиль, который мы использовали на этой странице, содержит рамку серого цвета. Она обрамляет иллюстрацию. К сожалению, когда мы используем табличную разметку, чтобы поместить подпись сверху или снизу, мы должны указать рамку другим способом, потому что подпись размещена за пределами границы таблицы. Мы можем исправить это, поместив часть границы на саму подпись:

figure {
  border-top: none;
  padding-top: 0;
}
figcaption {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Иллюстрации & подписи в HTML4

Масштабированная модель Эйфелевой башни в Парке Мини-Франция

HTML4, в отличие от HTML5, не имеет элементов, которые бы позволили вставить в документ изображение с подписью. Это предлагалось сделать (см HTML3), но в итоге в HTML4 предложение не вошло. Вот единственная возможность воспроизвести элемент figure:

<div class=figure>
  <p><img src="eiffel.jpg"
   
    alt="Эйфелева башня">
  <p>Масштабированная модель
    Эйфелевой башни в
    Парке Мини-Франция
</div>

Затем в таблице стилей вы используете класс «figure» для форматирования иллюстрации так, как вам необходимо. Например, чтобы сместить иллюстрацию вправо на расстояние, равное 30% от ширины окружающих абзацев, необходимо применить следующие правила:

div.figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

Как и ранее, необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.

Масштабирование изображения в HTML4

Чтобы избежать выхода изображения за рамки иллюстрации и при условии, что вы знаете ширину всех изображений в документе, вы можете добавить минимальную ширину DIV следующим образом:

div.figure {
  min-width: 150px;
}

Сен-Тропе и его форт в вечернем солнце

Чтобы смасштабировать изображение на всю ширину иллюстрации (как мы сделали с изображением справа), вы можете добавить атрибут КЛАССА и соответствующее правило CSS, очень похожее на пример с HTML5 выше. Вот разметка, которую мы использовали:

<div class=figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="Сен-Тропе">
  <p>Сен-Тропе и его форт
    в вечернем солнце
</div>

А вот таблица стилей:

div.figure {
  float: right;
  width: 30%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Одно дополнение: этот приём делает изображение настолько широким, насколько позволяет DIV (площадь внутри border и padding).

Размещение описания сверху в HTML4

Средиземное море около Кап Ферра

Чтобы разместить подпись сверху, добавьте эти правила в таблицу стилей из предыдущих секций:

div.figure {
  display: table;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

‘+’ приводит к тому, что правило действует на элемент P, который следует за другим P. Что означает, что условие действует на второй элемент P иллюстрации, который содержит описание картинки.

(Эта техника может привести к ошибкам в некоторых браузерах, разработанных ранее 2003, особенно в комбинации с масштабированием изображений, как в примере выше)

Как и прежде, серая рамка, которую мы выбрали для обрамления иллюстраций на этой странице, будет обрамлять только само изображение. Чтобы рамка была вокруг изображения и подписи, добавьте эти правила:

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Навигация по сайту

Размеры в SVG • Про CSS

Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.

Спецификация.

Вьюпорт

Содержимое SVG-элемента отрисовывается на бесконечном холсте и может быть сколь угодно большого размера, но видимая часть холста соответствует размерам SVG-элемента. Эта область отрисовки называется viewport (вьюпорт).

SVG позволяет управлять как размерами вьюпорта, так и поведением содержимого относительно него: оно может обрезаться или показываться полностью, может растягиваться с потерей пропорций или стараться уместиться целиком, даже если при этом появляются пустые поля. Этим поведением можно управлять с помощью атрибутов.

Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется:

Ширина и высота

Шириной и высотой элемента можно управлять стандартными свойствами width и height:

<svg>
  ...
</svg>

Их можно задавать как атрибутами, так и в CSS:

.mysvg {
  width: 350px;
  height: 200px;
}

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

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

viewBox

Похожим образом не изменяя размеры содержимого ресайзится iframe, но в случае с SVG это поведение можно изменить, если определить размеры области с помощью свойства viewBox:

<svg
    viewBox="0 0 180 180">
  ...
</svg>

Первые два значения — координаты X и Y верхнего левого угла отображаемой области, последние два — ширина и высота. viewBox задаётся только атрибутом.

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

viewBox можно использовать, например, для кадрирования изображения, чтобы показывать не всю картинку, а только какую-то её часть:

Это очень простое демо, вот пример посложнее от Sarah Drasner.

Интересно, что если у SVG нет размеров, но задан viewBox, изображение займёт собой всё доступное пространство:

<svg viewBox="0 0 180 180">
  ...
</svg>

Это поведение может стать проблемой: если размеры у иконок задаются в стилях, а они не загрузились — страница может превратиться в парад гигантских SVG-иконок. Чтобы этого не произошло, всегда явно задавайте в атрибутах SVG ширину и высоту, их потом легко переопределить в CSS.

preserveAspectRatio

Как мы видели в примере выше, если у SVG заданы размеры и viewBox, содержимое будет сжиматься и растягиваться с сохранением пропорций, чтобы поместиться целиком, но этим поведением тоже можно управлять — с помощью свойства preserveAspectRatio (оно задаётся только атрибутом).

Например, с помощью значения none можно указать, что сохранять пропорции не нужно:

<svg
    viewBox="0 0 180 180"
    preserveAspectRatio="none"
    >
  ...
</svg>

SVG с viewBox и preserveAspectRatio='none' ведёт себя очень похоже на img: при изменении размеров содержимое масштабируется под размеры вьюпорта не сохраняя пропорции.

none будет полезно для резиновых фонов:

Остальные значения preserveAspectRatio состоят из двух частей: первая задаёт выравнивание, вторая — поведение элемента относительно вьюпорта.

Выравнивание задаётся одним значением, определяющим положение по вертикали и по горизонтали, например: xMaxYMin. Для обеих осей можно задать положение в начале, в середине и в конце:

xMin, YMin — в начале оси xMid, YMid — в середине xMax, YMax — в конце

Эти значения можно комбинировать в любых сочетаниях, но порядок должен сохраняться: первым всегда идет значение для X, вторым для Y. Значение для Y всегда пишется с большой буквы.

Поведение элемента определяется второй частью preserveAspectRatio. Возможные значения:

meet — содержимое стремится уместиться целиком (как фон с background-size: contain) slice — содержимое заполняет собой всю область видимости (как background-size: cover: что не поместилось, обрежется)

Важно помнить, что preserveAspectRatio не работает без viewBox. viewBox задает область, которая должна масштабироваться, preserveAspectRatio определяет как именно она должна это делать.

Также нужно понимать, что preserveAspectRatio срабатывает, если вьюпорт и вьюбокс имеют разные соотношения сторон. Если соотношения сторон совпадают, и содержимое умещается без полей, preserveAspectRatio работать не будет (в этом случае в нём просто нет необходимости).

Для использования SVG в качестве иконок достаточно viewBox и размеров, но если предполагается делать что-то более сложное, имеет смысл разобраться с единицами измерения и системой координат.

Единицы измерения

Внутри SVG можно использовать em, ex, px, pt, pc, cm, mm, in, проценты, а также единицы системы координат (user space units). Единицы системы координат соответствуют пикселям, поэтому для значений в пикселях единицы измерения указывать не нужно.

Системы координат

В SVG-документе есть две системы координат:

1. Система координат области отрисовки — viewport space.
2. Система координат содержимого — user space.

Отсчет системы координат вьюпорта начинается от левого верхнего угла вьюпорта, системы координат содержимого — от левого верхнего края вьюбокса.

По умолчанию система координат содержимого соответствует системе координат вьюпорта, а единицы измерения содержимого — единицам измерения вьюпорта, но при использовании трансформаций или viewBox масштабируется вся система координат с единицами измерения, то есть пиксели из user space больше не равны пикселям из viewport space.

Поизменяйте размеры элемента и посмотрите что происходит с системой координат содержимого (она показана бирюзовым):

Система координат содержимого начинается из точки 0,0, и если вьюпорт и вьюбокс не совпадают, точка отсчета, как и вся система координат содержимого, будет ездить и масштабироватся вместе с вьюбоксом.

Масштабирование единиц измерения хорошо видно на примере обводки: изначально её толщина равна единице, но при изменении размеров видимая толщина обводки будет изменяться вместе с фигурой:

Если такое поведение нежелательно, это можно исправить с помощью свойства vector-effect со значением non-scaling-stroke, оно добавляется к содержимому SVG:

<circle r="60" cx="75" cy="75"
  stroke="black" stroke-width="1"
  vector-effect="non-scaling-stroke"/>

vector-effect можно задавать как атрибутом, так и в CSS.

Также новая система координат создается при добавлении трансформаций:

Внутри трансформируемого элемента будет своя своя система координат, отличная от систем координат вьюпорта и вьюбокса.

Тема может выглядеть сложной, но на самом деле, достаточно немного поиграться с кодом, и всё станет понятно. Для лучшего понимания систем координат, размеров и трансформаций в SVG рекомендую демо Сары Суайдан, а также её статьи:

Позиционирование в CSS

От автора: одним из наиболее полезных инструментов в CSS, на мой взгляд, является позиционирование элементов документа. Под термином «позиционирование» понимается возможность расположить элемент (блок, картинку и др.) в абсолютно любом месте документа.

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

Для начала давайте рассмотрим классический пример, где нам потребуется использование позиционирования… к слову, пример этот как раз и взят из одного из упомянутых выше вопросов. Итак, на указанной части шаблона:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

мы имеем 2 логические части — шапка и блок меню. При этом оба блока содержат в себе части единой картинки — автомобиля «заезжающего» с шапки на меню. Теоретически здесь мы могли бы обойтись и без позиционирования. Для этого достаточно было бы вырезать картинку шапки и фон меню, при этом на каждой из картинок присутствовала бы своя часть автомобиля:

Но этот вариант далеко не оптимален. Гораздо лучше было бы, если бы у нас имелась отдельно картинка автомобиля, которая совсем не зависела бы от остального потока элементов. В этом случае мы смогли бы «таскать» автомобиль, выбирая для него нужное расположение. Как раз такую возможность нам предоставляет свойство CSS под названием position.

Указанное свойство имеет следующие возможные атрибуты: position: absolute | fixed | relative | static

Относительно атрибута static следует заметить, что его можно не использовать вообще, поскольку изначально это атрибут любого элемента на странице, поэтому если указать для элемента свойство position:static, то абсолютно никаких изменений мы не увидим.

А вот 3 других атрибута — весьма полезны. Для начала давайте укажем описание каждого из них.

— absolute (абсолютный). Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

— fixed (фиксированный). По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы.

— relative (относительный). Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.

Итак, как же мы можем осуществить задуманное. Все просто. Нам известна ширина макета сайта (она фиксирована). Соответственно, все что потребуется — это разместить картинку, к примеру, в шапке и спозиционировать ее относительно шапки. «Сдвигать» картинку мы можем посредством упомянутых атрибутов left (сдвиг от левой границы), top (сдвиг от верхней границы), right (сдвиг от правой границы) и bottom (сдвиг от нижней границы). Во всех четырех случаях границами будут границы элемента, относительно которого осуществляется позиционирование. И вот здесь есть небольшой нюанс, который мы сейчас увидим.

Итак, картинку автомобиля мы вырезали из макета и размещаем ее в шапке:

<div> <a href «/»> Записки Путешественника</a> <h3>на своем АВТО<br>и не только…</h3> <img src=»images/car.png» alt=»» /> </div>

В результате автомобиль расположится между ссылкой (для нее установлено выравнивание float:left) и заголовком второго уровня (для него установлено выравнивание float:right) в шапке. Пока что наша картинка находится в потоке элементов. Теперь давайте «изымем» ее из этого потока, чтобы ее можно было передвигать. Установим для элемента с классом car абсолютное позиционирование:

Если сейчас обновить страницу, то никаких изменений мы не увидим. Все потому, что мы пока что не указали те самые атрибуты left, top, right и bottom. Для позиционирования элемента необходимо указывать 2 атрибута (1 из них должен отвечать за горизонтальное движение, второй — за вертикальное… например, пара left-top или left-bottom, или right-top и т.д.).

Для начала давайте укажем нулевую точку отсчета для картинки, прижав ее к верхнему левому углу:

.car{ position:absolute; left:0; top:0; }

Теперь, если обновить страницу, то мы сможем увидеть, что картинка действительно оказалась в верхнем левом углу, но не шапки, как мы могли ожидать… картинка прижалась к левому верхнему углу браузера:

Почему так произошло? Дело в том, что задав абсолютное позиционирование элементу, он начинает позиционироваться относительно элемента body. Как же сделать так, чтобы элемент позиционировался относительно другого конкретного элемента, например, относительно своего родителя — шапки? Все очень просто. Для этого мы можем задать родительскому элементу, к примеру, свойство относительного позиционирования. После этого дочерний блок будет позиционироваться уже относительно своего родителя, а не относительно элемента body.

.head{ height: 250px; position:relative; } .car{ position:absolute; left:0; top:0; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

При этом заметьте, что элемент уже вне потока документа, т.е. другие элементы его попросту «не замечают» — автомобиль перекрывает ссылку, игнорируя свойство обтекания float:left. Отлично, мы спозиционировали картинку относительно родителя. Осталось подивнуть ее на определенное количество пикселей от левой и верхней границ родителя (атрибуты left-top). Здесь можно взять соответствующие координаты из макета фотошопа или использовать другие удобные инструменты… или просто выровняв картинку «на глаз».

.car{ position:absolute; left:450px; top:140px; }

И мы добиваемся необходимого результата:

Ничего сложного нет. Поскольку макет я взял из вопроса пользователя — я не буду его прикладывать к дополнительным материалам. Практически аналогичный макет Вы можете найти в нашем курсе – Как нарисовать обалденный дизайн сайта с нуля, сверстать его и установить на WordPress

Для закрепления материала давайте решим следующую задачу, используя возможности позиционирования. Итак:

1. Необходимо разместить блок со строго заданными размерами по центру документа.
2. В этом блоке необходимо спозиционировать дочерний блок относительно его родителя.
3. Также необходимо создать блок, который должен быть прижат к левой границе браузера и при этом его положение должно быть фиксированным, т.е. он должен оставаться на месте, несмотря на возможную прокрутку документа.

Начнем с первого. Имеем блок со следующими размерами: ширина — 500 пикселей, высота — 300 пикселей. Необходимо центрировать этот блок относительно окна браузера. Вполне очевидно, что здесь мы должны воспользоваться относительными величинами (процентами), поскольку разрешение у каждого конкретного пользователя может отличаться — это и 1024*768, и 1440*900, и масса прочих.

Указываем разметку блока:

<div></div>

Его стили:

.block{ width:500px; height:300px; border:1px solid red; position:absolute; left:50%; top:50%; }

Если посмотреть результат в браузере, то увидим, что сейчас центрирована левая верхняя точка блока. Это логично, поскольку эта точка является своеобразным началом системы координат блока. И именно эту точку мы отодвинули от левого верхнего угла браузера на 50% (left:50%; top:50%). Мы центрировали вершину блока, но каким образом центрировать блок? Здесь все просто. Для реализации задуманного мы воспользуемся отступами (свойство margin) и подвинем блок вверх на половину его высоты и влево на половину ширины. Таким образом, мы получим центр самого блока, который и совпадет с центром документа:

.block{ width:500px; height:300px; border:1px solid red; position:absolute; left:50%; top:50%; margin:-150px 0 0 -250px; }

Теперь второе задание. Здесь просто. Создаем разметку дочернего блока:

<div> <div></div> </div>

И его стили:

.child{ width:200px; height:100px; border:1px solid #000; position:absolute; left:100px; top:50px; }

Ничего нового здесь нет — все тоже мы делали с автомобилем за тем исключением, что здесь родительский блок имеет свойство position:absolute (в первом примере для родителя мы устанавливали position:relative). Однако здесь мы все равно получили нужный результат, поскольку неважно какое свойство задано для родителя (absolute или relative) — дочерний блок все равно будет позиционирован относительно родителя.

И последнее задание. Со свойством position:fixed мы пока что не работали, но ничего сложного там также нет. Данное свойство очень похоже на position:absolute за одним исключением: элемент с таким свойством «привязывается» к точке окна браузера с указанными координатами.

Создаем разметку:

<div> <div></div> </div> <div></div>

И стили:

.fix{ width:20px; height:150px; border:1px solid #000; position:fixed; top:200px; left:0; }

Таким образом, мы указали, что блок всегда будет прилегать к левой границе документа (left:0;) и всегда будет иметь отступ от верхней границы 200 пикселей (top:200px;). Для того, чтобы убедиться в этом, достаточно увеличить высоту блока с классом block для получения полосы прокрутки. Теперь, если прокручивать документ, фиксированный блок всегда будет занимать одну и ту же позицию относительно окна браузера.

Вот и все. Как и говорил, ничего сложного в свойсте position нет, но используя это свойство можно создавать сайты с довольно сложным дизайном. На этом наш урок завершен. Ваши вопросы и отзывы всегда будем рады видеть в комментариях. Удачи в Ваших разработках и до новых встреч!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

() — CSS: каскадные таблицы стилей

Функция CSS scale () определяет преобразование, которое изменяет размер элемента на 2D самолет. Поскольку величина масштабирования определяется вектором, он может изменять размер по горизонтали и вертикали на разные масштабы. Его результатом является тип данных .

Это масштабное преобразование характеризуется двумерным вектором. Его координаты определяют степень масштабирования. сделано в каждом направлении.Если обе координаты равны, масштабирование будет равномерным ( изотропный ) и аспект соотношение элемента сохраняется (это гомотетическое преобразование).

Когда значение координаты выходит за пределы диапазона [-1, 1], элемент увеличивается по этому измерению; когда внутри, это сжимается. Если он отрицательный, результатом будет точечное отражение. в этом измерении. Значение 1 не действует.

Примечание: Функция scale () масштабируется только в 2D. Для масштабирования в 3D используйте scale3d () вместо .

Функция scale () задается одним или двумя значениями, которые представляют величину масштабирования. применяться в каждом направлении.

Значения

sx

<число> , представляющее абсциссу вектора масштабирования.

sy

<число> , представляющее ординату вектора масштабирования. Если не определено, его значение по умолчанию равно sx , что приводит к равномерному масштабированию, сохраняющему соотношение сторон элемента.

Масштабирование / масштабирование анимации проблематично для доступности, поскольку они являются обычным триггером для определенных типов мигрень.Если вам нужно включить такую ​​анимацию на свой веб-сайт, вы должны предоставить элемент управления, позволяющий пользователям включать отключение анимации, желательно для всего сайта.

Также рассмотрите возможность использования медиа-функции Prefers-Reduced-Motion . — используйте его, чтобы написать медиа-запрос, который отключит анимацию, если пользователь уменьшил анимацию, указанную в их системных настройках.

Подробнее:

Совместное масштабирование размеров X и Y

HTML

  
 Нормальный 
 Масштаб 
  

CSS

  div {
  ширина: 80 пикселей;
  высота: 80 пикселей;
  цвет фона: голубой;
}

.scaled {
  преобразовать: масштаб (0,7);
  цвет фона: розовый;
}
  

Результат

Масштабирование размеров X и Y отдельно, и перевод оригинала

HTML

  
 Нормальный 
 Масштаб 
  

CSS

  div {
  ширина: 80 пикселей;
  высота: 80 пикселей;
  цвет фона: голубой;
}

.scaled {
  преобразовать: масштаб (2, 0,5);
  трансформация происхождения: слева;
  цвет фона: розовый;
}
  

Результат

css — Масштабирование шрифта в зависимости от ширины контейнера

Но что, если контейнер не является окном просмотра (телом)?

Этот вопрос задан Алексом в комментарии к принятому ответу.

Этот факт не означает, что vw нельзя использовать в какой-то степени для определения размера этого контейнера. Теперь, чтобы увидеть какие-либо вариации, нужно предположить, что контейнер в некотором роде гибкий по размеру. Будь то прямой процент шириной или 100% минус поля. Вопрос становится «спорным», если контейнер всегда установлен, скажем, 200 пикселей в ширину — тогда просто установите размер шрифта , который подходит для этой ширины.

Пример 1

Однако при использовании контейнера гибкой ширины необходимо понимать, что каким-то образом контейнер имеет размер , размер которого все еще находится вне области просмотра .Таким образом, это вопрос настройки параметра vw на основе этой процентной разницы в размере окна просмотра, что означает учет размеров родительских оболочек. Возьмем этот пример :

  div {
    ширина: 50%;
    граница: сплошной черный 1px;
    маржа: 20 пикселей;
    размер шрифта: 16 пикселей;
    / * 100 = ширина области просмотра, так как 1vw = 1/100 от этого
       Итак, если контейнер составляет 50% области просмотра (как здесь)
       затем учитывайте это в том, какой размер вы хотите.
       Допустим, вам нравится 5vw, если бы он был на всю ширину,
       затем для этого контейнера установите размер 2.5vw (5 * 0,5 [т.е. 50%])
    * /
    размер шрифта: 2.5vw;
}
  

Предполагая, что div является дочерним элементом body , это 50% ширины 100% , которая в этом базовом случае является размером области просмотра. По сути, вы хотите установить vw , который будет вам хорошо выглядеть. Как вы можете видеть в моем комментарии к приведенному выше содержимому CSS, вы можете «продумать» это математически относительно полного размера области просмотра, но вам не нужно , чтобы это сделать.Текст будет «изгибаться» вместе с контейнером, потому что контейнер изгибается при изменении размера области просмотра. ОБНОВЛЕНИЕ: вот пример двух контейнеров разного размера.

Пример 2

Вы можете помочь обеспечить размер видового экрана, заставив вычисление на его основе. Рассмотрим этот пример :

  html {width: 100%;} / * Сделать 'html' шириной окна просмотра * /
корпус {ширина: 150%; } / * Переполняем тело * /

div {
    ширина: 50%;
    граница: сплошной черный 1px;
    маржа: 20 пикселей;
    размер шрифта: 16 пикселей;
    / * 100 = ширина области просмотра, так как 1vw = 1/100 от этого
       Здесь тело составляет 150% области просмотра, а контейнер - 50%.
       области просмотра, поэтому оба родителя учитывают его размер.Допустим, вам нравится 5vw, если бы он был на всю ширину,
       затем для этого контейнера установите размер 3.75vw.
       (5 * 1,5 [т. Е. 150%]) * .5 [т. Е. 50%]
    * /
    размер шрифта: 3.75vw;
}
  

Размер по-прежнему зависит от области просмотра, но, по сути, устанавливается на основе самого размера контейнера.

В случае динамического изменения размера контейнера …

Если размер элемента контейнера в конечном итоге изменился динамически его процентное соотношение либо через точки останова @media , либо через JavaScript, то, какой бы ни была базовая «цель», потребовался бы перерасчет для сохранения той же «взаимосвязи» для изменения размера текста.

Рассмотрим пример №1 выше. Если div был переключен на 25% ширину либо @media , либо JavaScript, то в то же время размер шрифта необходимо будет настроить либо в медиа-запросе, либо с помощью JavaScript для нового расчета из 5vw * 0,25 = 1,25 . Это приведет к тому, что размер текста будет таким же, как если бы «ширина» исходного контейнера 50% была уменьшена вдвое по сравнению с размером области просмотра, но теперь она была уменьшена из-за изменения его собственного процентного расчета.

Вызов

При использовании функции CSS3 calc () стало бы трудно выполнять динамическую настройку, так как эта функция в настоящее время не работает для font-size . Таким образом, вы не сможете выполнить чистую настройку CSS 3, если ваша ширина изменяется на calc () . Конечно, незначительной корректировки ширины полей может быть недостаточно, чтобы гарантировать любое изменение в font-size , поэтому это может не иметь значения.

Масштабирование элемента уровня блока в CSS — Джон Рохан

Масштабирование элемента уровня блока в CSS

Джон Рохан 2 мая 2015 года · 1 мин чтения ·

Иногда вы хотите масштабировать окно iframe, как изображение, но iframe не работает таким образом.Хороший пример — это когда вы встраиваете видео с YouTube на свой сайт.