Alto y ancho de una imagen con HTML

04/Dic/2007 HTML 47 Comentarios

Cuando aprendemos a escribir lenguaje HTML para crear nuestras páginas web aguantaremos poco creando páginas web con solo texto y estaremos deseosos de insertarle alguna imagen para darlas colorido.

La etiqueta HTML que nos permite poner imágenes en nuestra página web es IMG. La línea de código que necesitaríamos sería la siguiente:

<img src="mifoto.jpg" />

Vemos que el atributo src permite indicar el nombre de la imagen que queramos cargar. Este nombre puede ser directamente el de la imagen o bien una ruta relativa o absoluta más el nombre de la imagen.

Por defecto, el tamaño de la imagen que carga es su tamaño original.

Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen respectivamente. A estos atributos les tendremos que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar.

Así, si queremos poner la imagen a 100×100 pixels, la línea de código quedaría de la siguiente forma:

<img src="mifoto.jpg" width="100" height="100" />

 

Vídeos sobre HTML


47 comentarios en “Alto y ancho de una imagen con HTML”

Víctor Cuervo

Alejandro Guevara

PARA AUMENTAR, AGRANDAR, ZOOM, O DISMINUIR UNA IMGEN CON LA LUPA USAR ESTE CODIGO

Víctor Cuervo

Alejandro Guevara

Víctor Cuervo

Víctor Cuervo

Alejandro,

Te ha filtrado el sistema el comentario. Si quieres nos los puedes hacer llegar desde el formulario de contacto. http://lineadecodigo.com/contactar/ y lo incluimos en los comentarios.

Saludos.

Víctor Cuervo

Samantha

Prueba con object-fit: cover;
width: 100%;
height: 200px; los valores los ajustas a tu medida

Víctor Cuervo

joha

hola, quisiera poner una imagen solamente en el banner, si ingreso la imagen en el css no tengo problemas, pero si la quiero ingresar en el html no puedo dimensionarla. Cual posdria ser el problema. Gracias

Víctor Cuervo

José Andreu Ros

http://www.atamaria.es
Este es el nombre que le he puesto a mi blog de blogger
.Las imágenes de las entradas se ven muy pequeñas , antes de la última reforma de blogger las veía grandes , y las imágenes suben muy lentas. Nada de esto me ocurría antes de las modificaciones. Gracias por vuestra colaboración y un saludo.

Víctor Cuervo

abdul

hola
tengo una pagina web para mi agencia immobiliaria que la puedo administrar con el Blooger y necesito un programa gratuito de SLIDE SHOW que sea barato para cuando ponga una casa en venta puedan mis clientes ver las fotos y deslizarlas una por una
gracias y atentamente.

Víctor Cuervo

pepe campderros

hola no nos ha servido para nada esto tendría que estar cerrado además la foto de perfil da miedo

Víctor Cuervo

Alexandra Caicedo

Texto que deseamos incluir a la derecha de la imagen.

Víctor Cuervo

Jose Manuel

Tengo un problema, quiero hacer la imagen mas grande pero no puedo, ya intente con «height» y» weight» pero no funcionan, tambien lo intente con css pero nada, AYUDA!!!

Víctor Cuervo

Daniela Sanchez

ingresa la imagen ya con las medidas k necesitas..el heigh y el weight solo ajusta la imagen en pequeña proporcion..ej:1024 x768

Víctor Cuervo

Teresa

Hola, tengo una web con un código html que ocupa todo el ancho de la página y ahí pegué los botones de las redes sociales. Queda mal porque las quería en linea y salen unas debajo de otras ocupando un montón de espacio y esteticamente tambien queda mal . Me podéis ayudar ?? Gracias !

Víctor Cuervo

Víctor Cuervo

¿Tienes la página pública para poder revisarla? Para que te queden en línea tendrás que utilizar algún agrupador de elementos como span.

Víctor Cuervo

Daniel

quisiera si me pudieran ayudar… Soy nuevo en html, quiero colocar una imagen y agregarle un tamaño y su posición al lado izquierdo pero al agregar un texto este se coloca hacia abajo de la imagen y quiero colocarlo al lado derecho de la imagen me pueden ayudar

Víctor Cuervo

Alexandra Caicedo

Hola Daniel,

Intenta con este código: reemplaza el origen de la imagen, define el tamaño en width y height, y con align se define la posición de la imagen a la izquierda

Texto que deseamos incluir a la derecha de la imagen

Víctor Cuervo

Alexandra Caicedo

Texto que deseamos incluir a la derecha de la imagen.

Víctor Cuervo

Alexandra Caicedo

(

Texto que deseamos incluir a la derecha de la imagen.

}

Víctor Cuervo

Alexandra Caicedo

img src-=»imagen.png» width-=»500-» height-=»500-» align-=»left-«>Texto que deseamos incluir a la derecha de la imagen.

Víctor Cuervo

Víctor Cuervo

Lo que tienes que hacer es utilizar CSS para alinear la imagen a la izquierda y así el texto quedará a la derecha. Algo así en código:

<img src="images/html5.png" style="float:left;" width="210" height="240" alt="Logo HTML5"/>
Texto para alinear a la derecha de la imagen.

Espero que te ayude.

Saludos.

Víctor Cuervo

Víctor Cuervo

Lo hemos explicado algo más en detalle en http://lineadecodigo.com/css/texto-a-la-derecha-de-una-imagen-con-css

Espero que os sea de utilidad.

Saludos.

Víctor Cuervo

yolanda Ramirez

esta muy interesante

Víctor Cuervo

Víctor Cuervo

Muchas gracias Yolanda!

Víctor Cuervo

Alvaro

Estimados
Recién metiéndome al mundo de html5
quisiera consultarles un problema que tengo
quizás alguno me podría ayudar

http://ssiq.redsalud.gob.cl/wrdprss_minsal/wp-content/uploads/2017/01/ejemplomio.html

el link de mas arriba, es un mapa que diseño, se ve una animación cuando uno se pone
sobre la imagen este se agranda, pero en el mas pequeño (amarillo), no se ve el efecto
y quisiera saber como se podría hacer, ya que el código esta bien, pero como es muy pequeño
las otras imágenes lo pasan a llevar….

espero una ayuda

saludos

Víctor Cuervo

Víctor Cuervo

Buenas,

El problema es que la capa de la zona amarilla (la capa DIV) queda debajo de las otras y no se ve el efecto. Puedes poner esa capa en primer plano de la siguiente forma:

div.imagen6 p{			
  position: absolute;	
  left: 335px;	
  top: 338px;
  z-index: 1;
}

Y así podrás ver el efecto.

Saludos.

Víctor Cuervo

Unai

la pagina cuando entro me da error 404

Víctor Cuervo

Locutor Gastón Golcman

como se ubica una imagen hacia arriba? que comando seria?

Víctor Cuervo

Alvaro

es un código, el cual te da la posición de la imagen

CSS:

div.imagen6 p{

position: absolute;
left: 335px;
top: 338px;

}

html:

revisalo, esta muy bueno, con css
saludos

Víctor Cuervo

Alvaro

HTML: VA DENTRO DE BODY

Víctor Cuervo

Alvaro

disculpa, no se envía el codigo html, va mas abajo,,,,veamos si se visualiza

Víctor Cuervo

Héctor

Muchas gracias, sí me funcionó

Víctor Cuervo

Víctor Cuervo

Genial! Nos alegra mucho escuchar eso. :-D

Víctor Cuervo

saul

muchas gracias me funciono al 100%. :)

Víctor Cuervo

Víctor Cuervo

Nos alegra un montón que te haya servido. :-)

Víctor Cuervo

Mon

:)

Víctor Cuervo

Eduardo Antonio

no me salio -.-

Víctor Cuervo

Víctor Cuervo

¿Qué te falla? ¿Cómo te sale la imagen?

Víctor Cuervo

Anita Piedra

Graciiias me funciono al 100

Víctor Cuervo

jhon fonseca

<——- haci tambien te podria funcionar y demas es mas eficiente con el link de la imagen

Víctor Cuervo

JESUS GARCIA GARCIA

buen dia, me gustaria saver si una persona puede poner una imagen dentro de mi sitio web ya terminada, ej: poner un boton que diga subir imagen y el cliente pueda selexionar el tamaño en pixeles.. Gracias espero y me puedan ayudar

Víctor Cuervo

erika

ayuda!
he puesto un código hover en una imagen pero se han aplicado para todas las demás imágenes, como lo puedo solucionar?

Víctor Cuervo

Martin

Seguro estas haciendo algo asi como img:hover, debes colocarle un id a esa imagen y desde esa id llamar al hover #idimgaen:hover

Víctor Cuervo

Alvaro

Me pueden hablar un poco de hover
la verdad que tengo un trabajo, donde al posicionarme sobre una imagen
este crea un efecto, pero buscando veo que h0ver, me crea algo parecido
quisiera vuestra definición de este o algun ejemplo,,,,,

saludos…

Víctor Cuervo

erick

como puedo manipular, cambiar el ancho y alto de una imagen desde un fromulario mediante me explico introducir eso 100 mediante un fromulario en una variable w=100 h=100 algo asi den me una ayuda porfavor

Víctor Cuervo

yo

jajajcomo es que se le aplica eiquetasa sintaxis y atributios para insertar imagen je

Víctor Cuervo

lineadecodigo

@anonimo,

Esa apreciación es muy buena. No por especificar el tamaño de la imagen reducimos el tamaño de esta. Y, efectivamente, si pesa 1Mb, seguirá pensando 1Mb.

Por lo tanto, aunque indiquemos el alto y el ancho es bueno tener imágenes optimizadas y que pesen poco.

Ahora, que también es una buena práctica definir el alto y el ancho de cara a la optimización del navegador.

Víctor Cuervo

anonimo

Hay que tener en cuenta, que si la imagen original pesa 1 Mb por ejemplo, y la muestrar a 100×100 pixels , sigue pesando igual, seria conveniente optimizarla a un tamaño menor.

Víctor Cuervo

Daniell

Hola. ps es genial eh tienen todos los Scrips que necesito, no duden que voy a recomdar esta pagina , es genial en pocas palabras ps gracias y adeos me despido .. Adeos..

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.