Etiqueta <img>
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Configurar los atributos width
y height
en las etiquetas <img>
ayuda a evitar los cambios de diseño. Esta información permite que el navegador reserve la cantidad correcta de espacio para la imagen.
Configura los atributos width
y height
: Los valores de estos atributos se deben configurar para que coincidan con las dimensiones de la imagen en sí (es decir, su tamaño intrínseco), en lugar de las dimensiones en las que se mostrará.
Ajusta el estilo de la imagen según sea necesario: Según el estilo existente de la imagen, agregar atributos width
y height
puede hacer que la imagen se renderice de manera diferente. En muchos casos, esto se puede corregir agregando height: auto
o width: auto
al diseño existente.
Estilos de CSS anterior |
Cambiar por |
img { width: 100%; } |
img { width: 100%; height: auto; } |
img { max-width: 100%; } |
img { max-width: 100% height: auto; } |
img { height: 100%; } |
img { height: 100%; width: auto } |
HTML
<img width="267" height="400" src="dog.jpg">
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2024-03-13 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2024-03-13 (UTC)"],[],[]]