Definir el tamaño de una imagen con CSS

09/Dic/2007 CSS 15 Comentarios
Ejemplos Programación CSS

En las primeras versiones del lenguaje HTML cuando se mezclaba el contenido como el diseño lo más normal es apoyarnos en el lenguaje HTML para definir el tamaño de una imagen. Si bien, una vez que se separa el diseño del contenido y aparece CSS como lenguaje de definición de estilos la idea es utilizar estilos CSS para definir el alto y ancho de una imagen. En este artículo vamos a ver cómo podemos definir el tamaño de una imagen con CSS.

Lo que vamos a hacer es definir un conjunto de clases CSS, la cual aplicaremos dependiendo de las necesidades de tamaño que tengamos para las imágenes dentro de nuestra página web en el código HTML.

Para poder dar el estilo utilizaremos las propiedades width y height, de igual manera que los utiliza el lenguaje HTML como atributos del elemento img, pero en este caso los asignaremos a una clase.

De esta manera generaremos el siguiente código en CSS que incluiremos dentro de nuestra definición de estilos:

img.pequeña{
  width: 50px;
  height: 50px;
}
img.mediana{
  width: 100px;
  height: 100px;
}
img.grande{
  width: 200px;
  height: 200px;
}

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 un elemento img. Para ello utilizamos el atributo class. Así tendremos el siguiente código:

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

Así la página HTML completa nos quedará de la siguiente forma:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tamaño de una imagen con CSS</title>
  <style type="text/css">
    img.pequeña{width: 50px; height: 50px;}
    img.mediana{width: 100px; height: 100px;}
    img.grande{width: 200px; height: 200px;}
  </style>
</head>
<body>

<h1>Tamaño de una imagen con CSS</h1>

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

</body>
</html>

Vemos que hemos añadido el código CSS dentro del elemento style en la cabecera o head de la página.

Con estos pasos tan sencillos habremos conseguido definir el tamaño de una imagen con CSS. ¿Cómo haces tú para poder definir el tamaño de una imagen, ya que existen más alternativas? ¿Creas una clase? ¿Lo asignas directamente a un elemento? Cuéntanos en los comentarios ya que estaremos encantados de saberlo.

Vídeos sobre CSS


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

Víctor Cuervo

Marcial alejandro cornejo aguilar

hola mi proyecto consiste en hacer un test entonces ya tengo las respuestas correctas y la base de datos entonces quiero hacer un sistema que verifique las respuestas de los usuarios pero solo la correcta y que la compare con la de la base de datos como pudiera hacerlo.

Víctor Cuervo

ja

si hubiera más de una imagen en la entrada o página, ¿cómo especificáis una en concreto?

Víctor Cuervo

marcos

poniendole un class o un id a la imagen en el hrml

Víctor Cuervo

Víctor Cuervo

Muy buen punto Marcos, pero ojo, los id de las páginas tienen que ser únicos, así que si hay varios elementos debería de tener diferente id.

Saludos.

Víctor Cuervo

Sharon

Gracias por la información.
Necesito el código para mi Blog de blogger, para que mis imágenes se redimensionen al 75% y que al dar click en la imagen esta se vean en su tamaño real de 600 px x 600 px. Y el cogido en que parte del CSS va? bueno en mi caso de mi plantilla HTML…

Víctor Cuervo

Adonaí Valencia M

Muy buena esta informacion!!

Víctor Cuervo

Víctor Cuervo

Gracias Adonaí, nos alegra que te haya servido. :-D

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.

Víctor Cuervo

thejorgeflore

Seria así:
.image
{
background-image:url(“1.jpg”);
background-size: 108px 138px;
background-repeat:no-repeat;
}

¿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.