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.
