X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
> width и height у тега img в процентах...
Владимир Н
Владимир Н
Topic Starter сообщение 27.1.2011, 19:57; Ответить: Владимир Н
Сообщение #1


Насколько я знаю, ширину и высоту изображения можно задавать в пикселях и в процентах. Однако, когда я задаю в процентах, документ не проходит валидацию.
Почему так происходит, кто-нибудь знает?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 27.1.2011, 20:04; Ответить: Alcorn
Сообщение #2


Насколько я знаю, ширину и высоту изображения задавать в атрибутах было популярно в 90-х. Сейчас это делается в css.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
BoL4oNoK
BoL4oNoK
сообщение 27.1.2011, 20:06; Ответить: BoL4oNoK
Сообщение #3


Alcorn,можно подробнее?)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ottaviano
ottaviano
сообщение 27.1.2011, 20:09; Ответить: ottaviano
Сообщение #4


Владимир Н, а можно ссылку на страницу валидатора?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 27.1.2011, 20:15; Ответить: Alcorn
Сообщение #5


Это называется отказ от атрибутов и вынос свойств элементов в css.

Раньше - <img src="1.png" width="100" height="100" alt="">
Сейчас - <img src="1.png" class="a" alt=""> (css - .a {width:100px; height:100px})

Из плюсов - css кэшируется, можно задать свойства сразу всем элементам класса, меньше писанины.

p.s. в html5 валидны только цифры, т.е. width="100px" либо width="100%" приводит к невалидности.

Line 11, Column 56: Bad value 10px for attribute width on element img: Expected a digit but saw p instead.
<div><img src="1.png" width="10px" height="10px" alt=""></div>
Syntax of non-negative integer:
One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Rayled_hb
Rayled_hb
сообщение 27.1.2011, 21:02; Ответить: Rayled_hb
Сообщение #6


(Alcorn @ 27.1.2011, 22:04) *
Насколько я знаю, ширину и высоту изображения задавать в атрибутах было популярно в 90-х.

(Alcorn @ 27.1.2011, 22:15) *
Сейчас - <img src="1.png" class="a" alt=""> (css - .a {width:100px; height:100px})

Совсем наоборот. Как раз в атрибутах и популярней всего, да и правильней, тк, во-первых, изображения на сайте, как правило, имеют разные размеры и под каждое создавать класс слишком жирно, да и запутаться немудрено. Во-вторых, если размеры указать в атрибутах, то страница будет грузиться быстрее, тк браузеры будут пропускать загрузку картинок, чтобы сделать ее после загрузки страницы. Да и тот факт, что width и height у IMG никуда не делись и в HTML 5, говорит о многом.
(Alcorn @ 27.1.2011, 22:15) *
в html5 валидны только цифры, т.е. width="100px"

Такого указания в пикселях никогда не было в HTML, всегда указывались только цифры. px - это в CSS.
Владимир Н, хотелось бы увидеть как ваш код, так и валидатор.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Владимир Н
Владимир Н
Topic Starter сообщение 27.1.2011, 21:12; Ответить: Владимир Н
Сообщение #7


Код:
<img src="/images/001.jpg" width="60%" height="31%" alt="Картинка">

Валидатор:
Line 56, Column 117: Bad value 60% for attribute width on element img: Expected a digit but saw % instead.
…001.jpg" width="60%" height="30%" alt="Картинка">
Syntax of non-negative integer:
One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.

Line 56, Column 117: Bad value 30% for attribute height on element img: Expected a digit but saw % instead.
…001.jpg" width="60%" height="30%" alt="Картинка">
Syntax of non-negative integer:
One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.
В принципе, здесь уже сказали, что HTML5 воспринимает только цифры (без px, % и т. д.). Судя по поведению валидатора, это действительно так, но в спецификации я этого не нашёл.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Rayled_hb
Rayled_hb
сообщение 27.1.2011, 21:16; Ответить: Rayled_hb
Сообщение #8


(Владимир Н @ 27.1.2011, 23:12) *
в спецификации я этого не нашёл.

Ну спек-то еще и нет, а вот инфу вы и правда просто не нашли, поэтому вот:
"Author requirements: The width and height attributes on img, iframe, embed, object, video, and, when their type attribute is in the Image Button state, input elements may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. The attributes, if specified, must have values that are valid non-negative integers."
"The dimension attributes are not intended to be used to stretch the image."
"User agent requirements: User agents are expected to use these attributes as hints for the rendering."
линк http://dev.w3.org/html5/spec/the-map-element.html
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Владимир Н
Владимир Н
Topic Starter сообщение 27.1.2011, 21:46; Ответить: Владимир Н
Сообщение #9


Да, спасибо. Я понял.
Понял, что не получится реализовать задуманное.
Я хотел, чтобы изображение меняло размер в зависимости от размера окна. Однако, как сказал Rayled, изображения на сайте разные, и для каждого задавать размеры в CSS, это не реально.
Я-то хотел, чтобы одно изображение, допустим, занимает 60% от ширины блока с текстом, другое, например, 30% (т. е. они изначально отличаются по ширине в два раза), но при изменении размера окна, изображения увеличиваются, либо уменьшаются (но соотношение в размере между ними не изменяется).
Таким образом, если я изначально знаю какие изображения и сколько их будет, я могу управлять размерами через CSS. Но, если изображений много и они разные, и добавляются на сайт через CMS, то фишка с CSS не прокатит.
Решения я пока не вижу... (((

P.S. Спецификация HTML5 есть, но пока носит статус "черновика".
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Rayled_hb
Rayled_hb
сообщение 27.1.2011, 22:05; Ответить: Rayled_hb
Сообщение #10


Владимир Н, ну зачем же сразу так. Я думаю при помощи CSS-то все-таки можно задавать, используя атрибут style. Просто с атрибутами ширины и высоты загрузка быстрее идет и это, как бы правильней.
<img src="#" alt="qwe" style="width:50%;height:70%" />

Другой вопрос, будет ли это работать в HTML5. Но выход я думаю в любом случае можно будет найти.
ps Проверять работу с доктайпом html5 не стал, лень. :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Поведение тега code
4 Den1xxx 5987 6.4.2014, 9:29
автор: -Den1xxx-
Открытая тема (нет новых ответов) Резиновая вёрстка + img
3 LWDM 3658 26.9.2012, 17:53
автор: -Bugnet-
Открытая тема (нет новых ответов) Дизайн всплывающего окна тега acronym
1 Betelgeise91 6274 24.12.2011, 9:03
автор: -pavelsc-
Открытая тема (нет новых ответов) Захотелось странного (div width)
2 Winns 5427 13.12.2011, 0:36
автор: -Очень-
Открытая тема (нет новых ответов) [помогите] Padding тега A в Opera на конкретном сайте
5 riartem 6272 24.9.2011, 15:55
автор: -pavelsc-


 



RSS Текстовая версия Сейчас: 23.4.2024, 12:38
Дизайн