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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter