Каковы последствия использования процента для атрибутов width,height элемента img?

Извините, если это глупый вопрос, но дело в том, что я понятия не имею об этом.

Я искал, чтобы найти способ, чтобы позиция img элемент HTML страницы, которые заметили это предложение из w3schools.com (речь идет о настройке width на img элемент):

в HTML 4.01 ширина может быть определена в пикселях или в % от содержащегося элемента. В HTML5, значение должно быть в пикселях.

он говорит, что атрибут width должны быть задана в пикселях а не в процентах. Но решение моей проблемы было намного проще при использовании процента. Я использовал процент и проверил результат в последних версиях FireFox, Chrome и IE. Все в порядке.

теперь мой вопрос в том, каковы плохие последствия использования процентов (несмотря на директивы HTML5), пока он действительно работает нормально? О чем мы должны заботиться, а о чем нет?

большое спасибо за чтение и прояснить ситуацию.

10
css html html4 html5 width

2 ответов

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

в документах WHATWG HTML5 указано следующее В разделе разметку:

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

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

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

Если вы используете неправильный синтаксис? Ну, вы можете это сделать, но есть и недостатки: непредсказуемый рендеринг браузером недопустимых элементов, низкая производительность браузера, проблемы кросс-браузерной совместимости, потенциальные проблемы безопасности и многое другое. Существует также знание о том, что есть HTML-педанты, которые смотрят на ваш синтаксис, как на то, что собака бросила. В конечном счете, если вы можете сделать что-то правильно-указав свой процентные ширины в вашем css, а не в вашем html-я не вижу смысла делать что-то неправильно только потому, что браузеры, которые вы попробовали, все равно будут отображать страницу.

Как отмечено в моем комментарии, ширина и высота изображения могут быть указаны в CSS с использованием различных единиц-пикселей, ems, rems, процентов, сантиметров, дюймов и т. д.-см. единицы измерения css @ w3.org.

4

Привет, что я нашел, это ваше предположение правильно, но, чтобы прояснить, попробуйте это сами. На основе что W3 валидатор

Если вы передадите этот код:

<img src="http://placehold.it/350x150" alt=" " width="100%" height="100%">

вы получили сообщение об ошибке

плохое значение 100% для ширины атрибута на элементе img: ожидаемая цифра, но вместо этого увидела%.

но если вы получите это 

<img src="http://placehold.it/350x150" alt=" " width="350" height="150">

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

2