HTML-<img> элемент может иметь высоту атрибут ширина/, и он также может иметь CSS ширина/высота свойства.В чем разница между атрибутом width/height HTML и свойством width/height CSS в элементе img?
<img src="xxx.img" width="16" height="16"
style="width: 16px; height: 16px"></img>
В чем разница между атрибутом HTML и свойством CSS и должны ли они иметь такой же эффект?
горячие дискуссии о предмете можно найти здесь: Width attribute for image tag versus CSS
Подводя итог:
Выигрыш от объявления значение ширины и значение высоты (который не может быть в оригинальные физические размеры изображения) или из объявлений css (например, ширина: [valueX]; height: [valueY];) заключается в том, что он помогает ускорить рендеринг страницы. Браузер знает, сколько места для размещения определенной области страницы: это будет даже нарисовать место для заметок на первый ничья, первый разбор + рендеринг страницы. Если вы не определяете любую ширину и высоту, то браузеру необходимо скачать картину и затем выяснить, какие размеры, пробел в выделить, а затем перерисовать страницу.
Это, по-моему, самый благоприятный эффект, на мой взгляд.
вы можете попробовать это
<img src="some_pic.jpg" width="100" />
его высота будет автоматически размер.
и это
<img src="some_pic.jpg" style="width:100px" />
его высота не будет автоматически размер.
просто попробовать больше, и вы знаете разницу
Я сделал сравнение вверх на: http://jsfiddle.net/jF8y6/ с 4-й различными состояниями. Основное отличие заключается в том, как он используется через внешние таблицы стилей с точки зрения возможности изменять размер изображений для разных таблиц стилей (рабочий стол, мобильный, печатный и т. Д.) И гибкость, которую он приносит. Если вы жестко кодируете размеры, тогда это прекращает гибкость.
http://www.w3schools.com/tags/tag_IMG.asp
Как вы можете использовать размеры относительно размеров изображения? Я смущен – Marko
Они имеют тот же эффект.
<img width="100" height="100" /> был использован в течение длительного времени, то же самое с свойствами widht/height, скажем, HTML-таблицей.
Нет никакой разницы, указываете ли вы его на самом элементе или в CSS, хотя теперь я предпочитаю использовать CSS, чтобы я мог держать HTML ясным и кратким.
Вот пример http://jsfiddle.net/N2RgB/1/
Я загрузил тот же образ в 4 раза, как пропорциональные и не пропорциональные с помощью HTML атрибутов И свойства CSS.
Нет абсолютно никакой разницы.
Я слышал, что CSS становится стандартным, поэтому атрибуты иногда могут быть устаревшими. –
heltonbiker
И согласно моим экспериментам, если атрибуты противоречат стилю, стиль выигрывает. (Firefox, Chrome) – wberry
Ну, есть абсолютно разница. Браузеры всегда загружают HTML сначала, а затем таблицы стилей, что означает, что вы можете зарезервировать некоторую ширину с атрибутом, а затем применить правильный стиль позже, когда вы хотите использовать пользовательский интерфейс. – KinoP
Разница заключается в семантическом и общем подходе, а не в том, как рендеринг будет работать. :) Я лично предпочитаю концентрировать все вещи, такие как ширина и высота в классах CSS, и избегать использования обоих атрибутов, таких как «ширина» и встроенные стили, такие как «style = 'width: 100px», только потому, что это приводит к хорошему логическому разделению - HTML markup сообщает, что должно отображаться и правила CSS - как именно он будет выглядеть.
я могу увидеть разницу ... Проверьте следующий фрагмент кода из украдена из: http://jqueryui.com/resources/demos/button/icons.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- redefine source of background-image -->
<style>
.ui-icon { width: 64px; height: 64px; }
</style>
<script type="text/javascript" >
$(function(){
$("img").button({
icons: {
primary: "ui-icon-locked"
},
text: false
});
});
</script>
</head>
<body>
<img width="32px" height="32px"> <!-- size of img tag -->
</body>
</html>
Это результат:
+1 для упоминания рендеринга –
Внимание, связанное сообщение в блоге с 2005 года, а стандарты CSS могут быть разными, чем тогда. – wberry