Definir el tamaño de una imagen con CSS

09/Dic/2007 CSS 9 Comentarios

Lo más normal es apoyarnos en el lenguaje HTML para definir el tamaño de una imagen. Si bien, otra alternativa es utilizar estilos CSS para definir el alto y ancho de una imagen.

En este caso podemos definir una clase CSS, la cual aplicaremos dependiendo de las necesidades.

Utilizaremos los atributos width y height, de igual manera que los utiliza el lenguaje HTML con la etiqueta IMG, pero en este caso los asignaremos a una clase.

Para ello generaremos el siguiente código:

  1. img.pequeña{
  2. width: 50px; height: 50px;
  3. }
  4. img.mediana{
  5. width: 100px; height: 100px;
  6. }
  7. img.grande{
  8. width: 200px; height: 200px;
  9. }

Como se puede ver se han definido tres clases: pequeña, mediana y grande. Las cuales solo funcionaran sobre elementos IMG, si no hubiésemos antepuesto este elemento en la definición del estilo, podríamos haber utilizado las clases para cualquier tipo de elemento HTML.

Solo nos quedará el asignar la clase a una etiqueta IMG. Para ello utilizamos el atributo class. Así tendremos el siguiente código:

  1. <img class="pequeña" src="lineadecodigo.jpg"/>
  2. <img class="mediana" src="lineadecodigo.jpg"/>
  3. <img class="grande" src="lineadecodigo.jpg"/>

Vídeos sobre CSS


9 comentarios en “Definir el tamaño de una imagen con CSS”

Víctor Cuervo

Adonaí Valencia M

Muy buena esta informacion!!

Víctor Cuervo

Víctor Cuervo

Gracias Adonaí, nos alegra que te haya servido. 😀

Víctor Cuervo

Adonaí Valencia M

Excelente información, me gusta mucho para estar consultandola y aprendiendo.
Atentamente: Adonai Valencia M desde Medellin Colombia

Víctor Cuervo

Víctor Cuervo

Nos genera mucha ilusión saber que se puede aprender con las cosas que publicamos. 🙂 Gracias por el comentario.

Víctor Cuervo

Jose

☺Excelente post me fue muy util.

Víctor Cuervo

Jose

Buen aporte excelente información.

Víctor Cuervo

kort

esos codigos se deve insertar dentro de aki
si no no funsiona

Víctor Cuervo

ilen

pero si necesitas solo esa capa que te salga la imagen de ese tamaño prueba con esto que es lo mas facil y q se usa:

.capa image{
width: 100px; height:100px;
}
esto hara que solo en esa capa ‘capa’ la imagen se colocara de ese tamaño

Víctor Cuervo

and

el codigo es claro pero no es lo que busco.
lo que necesito es insertar una imagen desde una clase pero con las propiedades de tamaño ya definidas desde ahi.
Se puede??
tengo algo como:
.image
{
background-image:url(“1.jpg”);
width:108px;
height:138px;
background-repeat:no-repeat;
}
pero no funciona.

¿Algo que nos quieras comentar?

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

*

*