спутать с Html Image Height и Width

Question

Привет, ребята Я немного запутался о HTML IMG высоты тега и ширины и CSS/STYLE высота и ширина

<img alt="Title" src="/someimageurl" style="width:150px" width="150" /> 

Вы можете видеть, что я установил атрибут width с помощью style а также width атрибут для изображения. Когда мы используем изображение, эти два те же атрибуты, которые мы устанавливаем, или они разные? Если они разные, пожалуйста, объясните, каким образом?

Answer 1

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

Answer 2

Атрибут width - это устаревший способ указания ширины. С его помощью можно указать ширину в пикселях.

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

То же самое относится к height.

Answer 3

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

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

Answer 4

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

Answer 5

Атрибут width="150" HTML и CSS декларации width:150px, когда применяются к тому же img элементу, как правило, имеют тот же эффект (поэтому определение и является излишним), но они не одно и то же.

Атрибут HTML заставляет узел элемента в дереве документов иметь свойство width, установленное на значение 150. Объявление CSS, когда оно появляется в значении атрибута style, как здесь, вызывает свойство width свойства style узла элемента, чтобы получить значение 150px. При рендеринге документа браузер использует значение width, интерпретируемое как m (и масштабирует изображение до этой ширины, если его внутренняя ширина отличается), , если только CSS не включен, и в этом случае применяется каскад CSS, в результате чего значение 150px для использования.

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

Значение атрибута HTML должно быть чистым числом (с пикселем как подразумеваемой единицей) или процентом. В декларации CSS также допускается использование многих других единиц, например.блок em, который позволяет масштабировать изображение пропорционально размеру шрифта (полезно для небольших изображений, представленных в тексте), хотя обычно вы масштабируете высоту, а не ширину. В таких случаях вы можете использовать атрибут HTML как резерв (для ситуаций, когда CSS отключен), исходя из предположения о типичном размере шрифта, например. <img ... height=18 style="height: 1em">.