tamaño de una imagen css

PHOTO

Tue Apr 25 2023 14:53:08 GMT+0000 (Coordinated Universal Time)

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;
}
 Save
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" />
 Save
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>

COPY