html - tamaño - img src url
¿Cuál es la diferencia entre el atributo HTML width/height y la propiedad CSS width/height en el elemento img? (7)
El elemento HTML <img> puede tener el atributo de ancho / alto , y también puede tener las propiedades de ancho / alto de CSS.
<img src="xxx.img" width="16" height="16"
style="width: 16px; height: 16px"></img>
¿Cuál es la diferencia entre el atributo HTML y la propiedad CSS y deberían tener el mismo efecto?
Hice una comparación en: http://jsfiddle.net/jF8y6/ con 4 estados diferentes. La principal diferencia es la forma en que se utiliza a través de las hojas de estilo externas en términos de la capacidad de cambiar el tamaño de las imágenes para diferentes hojas de estilo (escritorio, móvil, impresión, etc.) y la flexibilidad que ofrece. Si codificas los tamaños, entonces se detiene la flexibilidad.
La diferencia está en el enfoque semántico y general, más que en cómo funcionará la representación. :) Personalmente, prefiero concentrar todas las cosas como el ancho y las alturas dentro de las clases de CSS y evitar usar atributos como "ancho" y estilos en línea como "estilo = ''ancho: 100px''", simplemente porque produce una separación lógica agradable - HTML el marcado indica lo que se debe mostrar y las reglas de CSS: cómo se verá exactamente.
Puedo ver una diferencia ... Verifique el siguiente fragmento de código robado en: 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>
Este es el resultado:
Un debate candente sobre el tema se puede encontrar aquí: Atributo de ancho para etiqueta de imagen frente a CSS
Para resumirlo:
La ganancia de declarar un valor de ancho y un valor de altura (que puede no ser las dimensiones físicas originales de la imagen) o de declaraciones css (como el ancho: [valorX]; altura: [valorY];) es que ayuda a acelerar la Renderizado de la página. El navegador sabe cuánto espacio para asignar un área particular de la página: incluso dibujará marcadores de posición de imagen en un primer sorteo, un primer análisis + procesamiento de la página. Cuando uno no define ningún ancho y alto, entonces el navegador tiene que descargar la imagen y luego averiguar sus dimensiones, espacio para asignar y luego volver a dibujar la página.
Este parece ser el efecto más beneficioso en mi opinión.
puedes probar esto
<img src="some_pic.jpg" width="100" />
Su altura será de tamaño automático.
y esto
<img src="some_pic.jpg" style="width:100px" />
Su altura no será de tamaño automático.
solo prueba mas, y sabes la diferencia
http://www.w3schools.com/tags/tag_IMG.asp
- No he usado la etiqueta de imagen en un tiempo para este propósito. Pero hay una diferencia, los atributos pueden ser relativos a las dimensiones de las imágenes, las propiedades del estilo CSS son absolutas (ya sea%, px, em ...)
Tienen el mismo efecto.
<img width="100" height="100" /> se ha utilizado durante mucho tiempo, lo mismo que con las propiedades widht / height de, digamos, una tabla HTML.
No hay diferencia si lo especificas en el elemento en sí o dentro del CSS, aunque ahora prefiero usar CSS para que pueda mantener el HTML claro y conciso.
Aquí hay un ejemplo http://jsfiddle.net/N2RgB/1/
He cargado la misma imagen 4 veces, tanto de forma proporcional como no proporcional, utilizando atributos HTML y propiedades CSS.
No hay absolutamente ninguna diferencia.