Проверь что ты задал стиль для img

Задавать Height и Width для изображений снова важно

Сторонники веб-оптимизаций часто советуют добавлять к изображениям атрибуты с размерами, что позволяет при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения. Это позволяет избежать смещения раскладки страницы по мере загрузки изображений — что с недавних пор начал измерять Chrome в новой метрике Cumulative Layout Shift (CLS).

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

Почему добавление Width и Height было хорошим советом

Your title
 
Introductory paragraph.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Эта страница будет отрисовываться в два этапа: первый — после загрузки HTML, второй — после загрузки изображения. Но это может привести к тому, что после загрузки изображения и вычисления необходимого для его отображения пространства, содержимое, расположенное под ним, «прыгнет» вниз:

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

Традиционным способом избежать этого была установка для тега атрибутов width и height , чтобы ещё на этапе загрузки одного лишь HTML браузер мог выделить для изображений необходимое количество места. Сделаем это в следующем примере:

Your title
 
Introductory paragraph.
 
Lorem ipsum dolor sit amet, consectetur…

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

Кроме раздражающих пользователя скачков, необходимость многократно перерисовывать страницу также может приводить к существенному увеличению нагрузки на процессор. На приведённом ниже скриншоте отображены расчёты производительности, выполненные в браузере Chrome на сайте с галереей, содержащей около 100 изображений. Показатели слева были достигнуты при наличии атрибутов width и height , справа — при их отсутствии.

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

Как CSS работает с шириной и высотой элемента

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

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

На самом деле, это очень легко исправить, добавив в CSS свойство height: auto , чтобы также переопределить значение заданного в HTML атрибута height .

Однако, не для всех этот факт является очевидным и думаю, что порой именно из-за такого поведения разработчики избегают задания размеров через HTML. Если в атрибутах изображения размеры не заданы, в CSS можно просто указать max-width: 200px , при этом явно не указывая height: auto , и браузер сам рассчитает нужную высоту, как только изображение загрузится.

Следовательно, если мы добавляем размеры через HTML-атрибуты и при этом используем трюк height: auto , то получаем лучшее из обоих миров, так? Раскладка страницы не смещается, но остаётся возможность менять размер через CSS. Что ж, возможно вы будете удивлены (я был удивлён, поэтому и решил написать эту статью), но до недавнего времени это было не так.

Для примера, рассмотрим код ниже:

 img 
Your title
 
Introductory paragraph.
 
Lorem ipsum dolor sit amet, consectetur…

В данной ситуации загрузка будет происходить следующим образом:

Погодите-ка, что здесь происходит? Мы вернулись к первой проблеме. Я же говорил, что указывая размеры изображения в HTML, можно избежать проблем со смещением элементов страницы. Становится интересно. Мы переходим к основной части данной статьи.

Проблема в том, что если в CSS в свойствах width и height задаётся не фиксированное значение (а в наше время адаптивности фиксированные значения и не используются), при рендеринге страницы возникает потребность получить размеры изображения из самого файла, прежде чем размеры сторон смогут быть посчитаны. При этом атрибуты width и height , заданные в HTML, игнорируются.

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

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

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

Решение проблемы

Ограничения для адаптивных изображений давно известны и были найдены способы решения этой проблемы, в том числе хак с использованием padding-bottom. В нём используется тот факт, что значение для свойства padding , заданное в процентах, всегда высчитывается из ширины родительского контейнера. Следовательно, это можно использовать для создания контейнера, высота которого будет пропорциональна его ширине. Например, у нас есть изображение с соотношением сторон 16:9, тогда следующий код создаст для этого изображения контейнер соответствующего размера.

.img-container < position: relative; padding-bottom: 56.25%; /* соотношение 16:9 */ height: 0; overflow: hidden; >.img-container img

У данной техники есть три основных проблемы:

1. Она требует ручного расчёта и перевода в проценты значения (например, для соотношения 16/9 нужно 9÷16*100 = 56.25% ), что потенциально требует отдельного CSS-правила для каждого соотношения сторон.
2. Запомнить набор всех необходимых свойств непросто — если забыть добавить или случайно удалить какую-то строку кода из примера выше, всё сломается. Не говоря уже о том, что эта техника требует, чтобы все изображения были обёрнуты в дополнительный элемент-контейнер.
3. Данный подход известен и используется не всеми веб-разработчиками.

И давайте будем честны — это хак. И нам следовало бы писать код без его использования.

Проблема фиксированного соотношения сторон

Описанная выше проблема рассматривалась несколькими организациями по стандартизации.

Рабочая группа CSS (CSS Working Group) предложила свойство aspect-ratio , о котором писала Rachel Andrew. Как только браузеры начнут поддерживать его, будет решена проблема сложности кода и пример выше будет упрощён до следующего вида:

Намного лучше! Это особенно полезно для видео, где нам обычно доступен набор часто используемых соотношений сторон, позволяя создать несколько классов для каждого размера. Возможно, это менее полезно для изображений, где размеры менее стандартизированы, из-за чего остаются нерешёнными ни проблема №1 с необходимостью отдельного CSS-правила для каждого изображения, ни проблема №3 с необходимостью разработчикам не забывать применять этот код. Следовательно, это шаг вперёд, но пока что не решение всех проблем.

Помимо этого, Web Incubator Community Group (WICG) — группа разработчиков браузеров и других заинтересованных сторон, способных экспериментировать с технологиями ещё до формальной стандартизации — также предложили свой вариант решения. Речь об атрибуте intrinsicsize , который в коде выглядит следующим образом:

Так как это HTML-атрибут, он может быть установлен для каждого изображения (решая проблему №1 с необходимостью отдельного CSS-правила для каждого изображения) и относительно легко задаётся (решая проблему №2 с необходимостью запоминать большой объем кода), но всё ещё остаётся актуальной проблема с популярностью, если только сообщество не станет активно его продвигать.

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

Вместо введения фиксированного значения свойства aspect-ratio , здесь используется CSS-функция attr , чтобы задать соотношение сторон, соответствующее атрибутам width и height , заданным в HTML. Функция attr уже некоторое время существует, но имеет очень ограниченную область применения — все браузеры поддерживают её при использовании в свойстве «content», например, content: attr(width) . Но для других свойств это ещё не реализовано.

Если бы функция attr работала и в других свойствах, с её помощью можно было получать значение атрибутов width и height и использовать для расчёта значения свойства aspect-ratio , как в примере выше. Это решило бы проблему №1 (не требовалось бы вручную задавать соотношение сторон ни в HTML, ни в CSS), проблему №2 (небольшой объем кода для запоминания) и, как мы увидим дальше, это очень простое решение проблемы №3 (принятие разработчиками).

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

• для элемента задан HTML-атрибут height
• для элемента задан HTML-атрибут width
• height (или width ) задаётся в CSS — в том числе, с использованием процентных значений вида max-width: 100%
• width (или height ) устанавливается на auto в CSS

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

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

Стимулирование использования этого решения

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

Таблица стилей браузера — место, где заданы CSS-стили по умолчанию (например, какой font-size у элемента h1 ). При необходимости, их можно переопределить собственными правилами оформления. Добавляя вышеупомянутое свойство aspect-ratio , нам не нужно стимулировать использование этого решения разработчиками — мы, по сути, автоматически включаем его для всех сайтов, которые соответствуют четырём указанным выше условиям.

Однако, это зависит от функции attr , имеющей доступ к HTML-атрибутам width и height , и от свойства aspect-ratio — ни то, ни другое ещё полностью браузерами не поддерживается. Поэтому вместо этого, в качестве более простого решения, браузеры могут заложить такое поведение в коде рендеринга страницы, а не раскрывать его в таблицах стилей браузера, но эффект будет тот же. Такой альтернативный способ реализации даже был частью основного предложения.

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

Обратная совместимость

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

Тем не менее, когда Firefox начали экспериментировать, обнаружились проблемы там, где width и height были заданы неправильно. Если раньше эти некорректные значения при переопределении CSS-стилями игнорировались бы, то теперь при установке значения auto они продолжали использоваться, что приводило к искажению пропорций изображения. Вы можете возразить, что разработчикам просто следует задавать правильные значения, а в некоторых случаях проблемы могут возникать и сейчас (как в приведённом выше примере, где не установили height: auto ). Но и повышать риск сломать разметку из-за небольшой ошибки — идея плохая. Это то, чего в вебе очень стараются избегать.

Решение этой проблемы относительно простое: пусть фактическое соотношение сторон изображения переопределяет значение, вычисленное в CSS. Таким образом, неправильно рассчитанное соотношение сторон будет использоваться для первоначально отрисованной страницы, но потом может быть пересчитано, когда изображение всё же загрузится. Это действительно может приводить к смещению макета (поскольку изначально выделенное может оказаться неправильным), но ведь так было и раньше. А в конечном счёте это ещё и лучше, поскольку неправильное соотношение сторон часто будет ближе к истине, чем нулевая начальная высота.

Внедрение в других браузерах

После успешного эксперимента Firefox, в Chrome также решили это реализовать (снова-таки, пока что с помощью изменения метода рендеринга, а не таблиц стилей браузера) и запустили по умолчанию в Chrome 79. Недавно, в январе 2020, Apple добавила данный функционал в Tech Preview версию Safari, так что вскоре он может появиться и в стабильной версии. Это будет значить, что последний из основных браузеров реализует это и веб станет лучше при использовании огромного количества сайтов.

Ограничения

При использовании данного функционала следует помнить о некоторых ограничениях, включая проблемы с:

• Art Direction
• Ленивой загрузкой
• Не изображениями

Art Direction

Фикс отлично работает для расчёта соотношения сторон, основанном на фиксированных width и height , но что если они меняются? Это называю art direction — ниже показан пример:

В этом случае мы используем широкое изображение для десктопов, а для мобильных — обрезанное квадратное. Адаптивность изображений может быть реализована с помощью атрибутов srcset элемента :

или с помощью элемента :

В настоящее время оба эти элемента позволяют задавать в теге атрибуты width и height только один раз. Также, их нельзя задавать в . Уже было предложено добавить возможность делать это, но пока что использование адаптивных изображений разных размеров всё равно будет приводить к смещению раскладки.

Ленивая загрузка

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

Некоторые техники ленивой загрузки могут включать отсутствие элемента или, по крайней мере, атрибута src (для предотвращения загрузки изображения браузером по умолчанию). Следовательно, в предложенных нововведениях может и не быть существенной пользы, в зависимости от того, как браузер обрабатывает элемент , с атрибутом src или без него. Хотя, если данное CSS-решение станет доступным, разработчики получат больше контроля над соотношением сторон.

Недавно командой Chrome была внедрена встроенная ленивая загрузка, после чего она была добавлена в спецификацию HTML. Вскоре эта функция появится и в Firefox а затем, надеюсь, и в Safari. В этом случае используется элемент с атрибутом src с примерно следующим синтаксисом:

Отлично. Что ж, к сожалению, я обнаружил, что это решение с высотой и шириной несовместимо с ранее добавленным встроенным функционалом ленивой загрузки, в чём можно убедиться на этой тестовой странице. Я сообщил об этой ошибке и надеюсь, что команда Chrome исправит её (Update: было исправлено в Chrome 83).

Не изображения

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

Заключение

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

Единственное что потребуется от веб-разработчиков, — задавать атрибуты width и height в разметке. Нам не следует отказываться от этой привычки, а многие CMS лишь помогают в этом. Согласно данным HTTPArchive, 62% тегов имеют ширину или высоту, что намного выше, чем я ожидал, если честно. Но давайте попробуем увеличить эту статистику еще больше, теперь у нас снова есть причина для этого. Итак, я призываю вас делать это при разработке сайтов. Это улучшит удобство ваших пользователей и, в конечном итоге, сделает их счастливее, а не к этому ли мы все стремимся?

От переводчика:

Мне написал @Alexandr_Mi, указав на ещё один вариант решения данной проблемы с помощью «data: image / svg + xml + lazyload».

Подробнее в заметке на Reddit

Скруглённые уголки

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

Код	Описание	Вид
div	Радиус скругления для всех уголков сразу.
div	Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div	Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div	Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

В примере 1 показано создание блока со скруглёнными уголками.

Пример 1. Уголки у блока

HTML5 CSS3 IE 9+ Cr Op Sa Fx

       
Меня — супплетивная форма винительного падежа от я.
  

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

Рис. 1. Блок со скруглёнными уголками

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

Пример 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 2. Круглая кнопка

В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .

Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.

Пример 3. Свечение

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 3. Свечение вокруг кружка

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.

Пример 4. Эллипсы

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 4. Использование эллиптических уголков

Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.

Пример 5. Изображения

HTML5 CSS3 IE 9+ Cr Op Sa Fx

     body < background: #4b5457; >img 
 
  

Изображение в качестве ссылки

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами и , как показано в примере 1.

Пример 1. Создание рисунка-ссылки

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

Чтобы убрать рамку, следует у тега установить атрибут border=»0″ (пример 2).

Пример 2. Удаление рамки вокруг изображения

Можно также воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется стилевое свойство border cо значением none (пример 3).

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

     A IMG  

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

Встраивание SVG в HTML

Поддскажите пожалуйста как правильно встраивать SVG в HTML, чтобы работало масштабирование изображения, тоесть если я укажу размеры в чтобы изображение принимало из значения.
Проблема в том что в FF вроде с этим нормально, но в Chromium и Konqueror у изображения появляются полосы прокрутки и изображение не масштабировано.
Вот пример.

firestarter ★★★☆
18.07.10 15:39:06 MSD
← 1 2 →

simple_best_world_web_master
( 18.07.10 17:11:04 MSD )

stevejobs ★★★★☆
( 18.07.10 17:16:44 MSD )
Ответ на: комментарий от stevejobs 18.07.10 17:16:44 MSD

Не смешно. Толксы там.

firestarter ★★★☆
( 18.07.10 17:20:04 MSD ) автор топика

Правильный способ пользоваться IMG или CSS background-image (в зависимости от необходимости), вот только не все это умеют.

Deleted
( 18.07.10 18:34:58 MSD )
Ответ на: комментарий от Deleted 18.07.10 18:34:58 MSD

Подобных проблем у флеша нету, векторную графику с ним размещать проще

simple_best_world_web_master
( 18.07.10 18:55:43 MSD )
Ответ на: комментарий от simple_best_world_web_master 18.07.10 18:55:43 MSD

Не считая того, что он решето, да. Но ТС об этом не спрашивал.

Deleted
( 18.07.10 19:02:56 MSD )
Ответ на: комментарий от simple_best_world_web_master 18.07.10 18:55:43 MSD

Ну вообще я хотел svg использовать для декорации сайта, лого например.
Похоже svg ещё рано использовать для этого, придётся использовать png. А жаль.

firestarter ★★★☆
( 18.07.10 19:03:19 MSD ) автор топика
Ответ на: комментарий от simple_best_world_web_master 18.07.10 18:55:43 MSD

Намякиваю

wfrr ★★☆
( 18.07.10 19:06:47 MSD )
Ответ на: Намякиваю от wfrr 18.07.10 19:06:47 MSD

Re: Намякиваю

Глянул код моего svg файла, там почти так.

firestarter ★★★☆
( 18.07.10 19:17:51 MSD ) автор топика
Ответ на: Намякиваю от wfrr 18.07.10 19:06:47 MSD

Re: Намякиваю

>690.02417

Deleted
( 18.07.10 19:18:58 MSD )
Ответ на: Намякиваю от wfrr 18.07.10 19:06:47 MSD

А, ты ж у меня скопировал 😀
Я тогда не понял что ты сказать хотел 😀

firestarter ★★★☆
( 18.07.10 19:25:35 MSD ) автор топика

К object приписываешь height=275px и всё работает

stevejobs ★★★★☆
( 18.07.10 19:31:55 MSD )
Ответ на: комментарий от stevejobs 18.07.10 19:31:55 MSD

>К object приписываешь height=275px и всё работает

Так а если мне нужно чтобы изображение отображалось пропорционально уменьшенное?

firestarter ★★★☆
( 18.07.10 19:34:25 MSD ) автор топика
Ответ на: комментарий от firestarter 18.07.10 19:34:25 MSD

Там три параметра: размеры картинки, вьюбокс, и размер объекта. Инфа не 100%, но здравый смысл подсказывает для уменьшения размера картинки использовать. уменьшение размера картинки. Поддерживает ли оно проценты — проверь сам 🙂

stevejobs ★★★★☆
( 18.07.10 19:41:39 MSD )
Ответ на: комментарий от firestarter 18.07.10 19:25:35 MSD

я хотел сказать что ты задал картинке размеры и ожидаешь что она будет их игнорировать 8) wfrr ★★☆
( 18.07.10 20:28:01 MSD )

Ответ на: комментарий от stevejobs 18.07.10 19:41:39 MSD

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

firestarter ★★★☆
( 18.07.10 20:31:05 MSD ) автор топика
Ответ на: комментарий от firestarter 18.07.10 20:31:05 MSD

Соответственно это их (Chrome/whatever) баги — репорть 🙂

Deleted
( 18.07.10 20:39:03 MSD )
Ответ на: комментарий от firestarter 18.07.10 20:31:05 MSD

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

где это написано? пруфлинк на стандарт!

когда указаны реальные размеры, будут реальные размеры, безо всякого масштабирования. Поставь на их место 100% — будет тебе масштабирование по размеру объекта.

stevejobs ★★★★☆
( 18.07.10 20:53:02 MSD )
Ответ на: комментарий от stevejobs 18.07.10 20:53:02 MSD

>Поставь на их место 100% — будет тебе масштабирование по размеру объекта.

Так там же у везде размеры тогда тоже надо в проценты переводить?

firestarter ★★★☆
( 18.07.10 20:59:06 MSD ) автор топика
Ответ на: комментарий от firestarter 18.07.10 20:59:06 MSD

> Так там же у везде размеры тогда тоже надо в проценты переводить?

в общем, я не вытерпел (с) пытки мысленными экспериментами, открыл твой пример 🙂

Сделал «ispect element» на твой объект.
Выставил object’у фиксированную высоту (чисто для примера) 300px;
Потом в свойствах объекта грохнул ширину SVG’шки совсем, а вместо высоты поставил 100%.
В результате отображается (на глазок) именно то, что нужно: трехсотпиксельная по высоте SVG’шка.

попробуй в файрбаге провести такой же эксперимент, будет ли выглядеть одинаково. Мне лениво 😉

stevejobs ★★★★☆
( 18.07.10 21:05:35 MSD )
Ответ на: комментарий от stevejobs 18.07.10 21:05:35 MSD

SVG векторный, ему всё равно, какого он размера. Этот размер используется (должен использоваться) только когда нет размеров во включающем документе, т.е. дефолт.

Deleted
( 18.07.10 21:13:37 MSD )
Ответ на: комментарий от Deleted 18.07.10 21:13:37 MSD

и у тебя, конечно же, есть пруфлинк на параграф в стандарте, где всё это рассказано.

stevejobs ★★★★☆
( 18.07.10 21:18:20 MSD )
Ответ на: комментарий от stevejobs 18.07.10 21:18:20 MSD

Ессесно

13.7 Visual presentation of images, objects, and applets
All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets.
13.7.1 Width and height

Attribute definitions
width = length [CN]
Image and object width override.
height = length [CN]
Image and object height override.

When specified, the width and height attributes tell user agents to override the natural image or object size in favor of these values.

When the object is an image, it is scaled. User agents should do their best to scale an object or image to match the width and height specified by the author. Note that lengths expressed as percentages are based on the horizontal or vertical space currently available, not on the natural size of the image, object, or applet.

The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.

Deleted
( 18.07.10 21:46:22 MSD )
Ответ на: комментарий от stevejobs 18.07.10 21:05:35 MSD

>попробуй в файрбаге провести такой же эксперимент, будет ли выглядеть одинаково. Мне лениво 😉

Причём тут файрбаг? В FF и опере всё нормально с svg, проблемы у Хромиума и Конкверора, тоесть у вебкит браузеров. Просто я думал что делаю что-то не так, видимо их баги.

firestarter ★★★☆
( 18.07.10 21:50:02 MSD ) автор топика
Ответ на: Ессесно от Deleted 18.07.10 21:46:22 MSD

по ходу топикстартер ослеп, бо я ему на это намекал еще в 19часов

wfrr ★★☆
( 18.07.10 22:01:40 MSD )
Ответ на: Ессесно от Deleted 18.07.10 21:46:22 MSD

1. У ТСа не указан DOCTYPE, поэтому Хром в принципе может рендерить любым стандартом, каким душа пожелает. Хоть HTML5 🙂 Верно?

2. Ни одного слова про SVG.

«When the object is an image, it is scaled.» — что именно надо шкалить: сами векторы, или вьюпорт, или «белое пространство подкладки»? Не написано.

«not on the natural size of the image» — что именно для SVG является «natural size», как оно вычисляется?

3. «When the object is an image, it is scaled.»
Здесь написано таки про IMG или SVG тоже? Не вижу ни одного упоминания SVG. Судя по строчке «All IMG and OBJECT attributes that concern visual alignment» под словом Images здесь прежде всего имеется в виду объекты IMG.

Если поведение SVG определяется реализацией, то как разработчики хрома/WebKit захотят отображать SVG, так и будет. С какой стати бы им брать за пример для подражания Firefox?

stevejobs ★★★★☆
( 18.07.10 22:03:18 MSD )
Ответ на: комментарий от wfrr 18.07.10 22:01:40 MSD

> по ходу топикстартер ослеп, бо я ему на это намекал еще в 19часов

ты говорил: «я хотел сказать что ты задал картинке размеры и ожидаешь что она будет их игнорировать 8)»

А в том документе, который процитировл Mystra, какбы косвенно утверждается прямо обратное: «lengths expressed as percentages are based on the horizontal or vertical space currently available, not on the natural size of the image».

То есть да, даже если он задал картинке размеры, они должны игнорироваться. Но это только если считать SVG «картинкой».

stevejobs ★★★★☆
( 18.07.10 22:07:31 MSD )
Ответ на: комментарий от stevejobs 18.07.10 22:07:31 MSD

ты говорил: «я хотел сказать что ты задал картинке размеры и ожидаешь что она будет их игнорировать 8)»

То есть да, даже если он задал картинке размеры, они должны игнорироваться.

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

wfrr ★★☆
( 18.07.10 22:23:05 MSD )
Ответ на: комментарий от wfrr 18.07.10 22:23:05 MSD

> Стиви, не буквоедствуй, твои рабы тя не поймут, просто пошевели своими москами и прикинь что ежели внутрях svg не задвать размер то его и не надо будет игнорировать, и даже браузеры (о боже) перестануть бажить

в любом случае, мы пришли к взаимопониманию %) Осталось теперь чтобы еще и ТСа озарило.

. и, ТС, пропиши уже доктайп, глаза кровоточат 🙂

stevejobs ★★★★☆
( 18.07.10 22:29:47 MSD )
Ответ на: комментарий от stevejobs 18.07.10 22:29:47 MSD

>Осталось теперь чтобы еще и ТСа озарило.

Вы тут понаписали непонятной фигни, скажите толком.

. и, ТС, пропиши уже доктайп, глаза кровоточат 🙂

Не пофиг? Страница тестовая.

firestarter ★★★☆
( 18.07.10 22:36:52 MSD ) автор топика
Ответ на: комментарий от firestarter 18.07.10 22:36:52 MSD

> Вы тут понаписали непонятной фигни, скажите толком.

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

stevejobs ★★★★☆
( 18.07.10 22:43:07 MSD )
Ответ на: комментарий от stevejobs 18.07.10 22:03:18 MSD

>1. У ТСа не указан DOCTYPE, поэтому Хром в принципе может рендерить любым стандартом, каким душа пожелает. Хоть HTML5 🙂 Верно?

Нет. Отсутствие DOCTYPE означает Quirks mode (для HTML) и не более того. (Для XHTML не значит ничего)

«When the object is an ___image___

Читать в школе не учили?

что именно надо шкалить: сами векторы, или вьюпорт, или „белое пространство подкладки“? Не написано.

LOLWUT? Понимаешь ли, SVG это картинка. Её можно масштабировать. Есть только один способ это делать. Есть даже атрибут у svg элемента (корневой который), который указывает как картинку масштабировать (учитывать пропорции, например). Открой для себя SVG спеку и логику.

3. „When the object is an image, it is scaled.“

Здесь написано таки про IMG или SVG тоже? Не вижу ни одного упоминания SVG.

facepalm.bmp Ты это серьёзно? Какой IMG, этот раздел относится к OBJECT в том числе. Image это image. Any image, dude.

Судя по строчке „All IMG and OBJECT attributes that concern visual alignment“ под словом Images здесь прежде всего имеется в виду объекты IMG.

Facepalm. Сравни IMG и image. И перечитай то предложение, о чём оно говорит?

Если поведение SVG определяется реализацией

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