En el lenguaje de marcado de hipertexto (HTML), se utiliza un comando especial "etiqueta" para mostrar una imagen en una página. Esta etiqueta se denomina img y contiene un conjunto de variables: "atributos". Con la ayuda de atributos, puede determinar todos los aspectos de la visualización de una imagen en una página de hipertexto, incluidas sus dimensiones. Sin embargo, esta no es la única forma de resolver el problema; también puede reducir el tamaño de la imagen utilizando hojas de estilo en cascada (CSS).
Instrucciones
Paso 1
Coloque los atributos de alto y ancho en la etiqueta responsable de mostrar la imagen deseada. Establezca el primero en el tamaño vertical de la imagen y el segundo en horizontal. Establezca ambos números en píxeles, pero no es necesario indicar unidades (px) aquí. Al calcular los valores necesarios para estos atributos, preste atención a la observancia de las proporciones de la reducción de la imagen, de lo contrario, se mostrará de forma distorsionada. Por ejemplo, para poner en una página una imagen a la mitad de un archivo llamado SomePic.jpg, cuyas dimensiones iniciales son 500 por 300 píxeles, la etiqueta se puede hacer con el siguiente comando:
Paso 2
Puede establecer la reducción proporcional de las dimensiones de la imagen original en porcentaje. Para hacer esto, use solo el atributo de altura sin especificar el ancho y agregue un signo de porcentaje después de especificar el número que define el tamaño. Por ejemplo, puede lograr el mismo efecto que en el ejemplo del paso anterior con una etiqueta escrita en este formulario:
Paso 3
Si desea especificar el tamaño de la imagen usando la descripción de estilos, use el mismo nombre de etiqueta - img - y los atributos - ancho y alto. En este caso, las unidades de medida (px, pt o%) deben especificarse siempre. Para establecer la reducción a la mitad del tamaño de absolutamente todas las imágenes de la página, coloque la siguiente entrada en el bloque de descripción de estilo: img {altura: 50%;} Si necesita reducir el tamaño de una sola imagen, agregue un atributo de identificación adicional a su etiqueta y asígnele un valor único para las imágenes de esta página; por ejemplo, PicOne: agregue el mismo valor al registro de estilo, separándolo con un "hash" # del nombre de la etiqueta. La descripción completa del estilo en este caso puede verse así: img # OnePic {altura: 50%;}
