Especificar el ancho y la altura como porcentajes sin sesgar proporciones fotográficas en HTML

Los usuarios pueden usar el sesgo de cualquier elemento para rotar o envolver el elemento, incluida la imagen, la tabla, la forma y otros ejes horizontales y verticales. Sin embargo, si no desea rotar la imagen en el sitio web, entonces HTML/CSS le permite especificar la altura y el ancho del elemento en porcentaje en la etiqueta de la imagen.

Esta publicación explicará el método para especificar la altura y el ancho de la imagen como porcentajes sin sesgar la proporción.

Cómo especificar el ancho y la altura como porcentajes sin sesgar proporciones de fotos en HTML?

Con el propósito de especificar el "altura" y "ancho"En forma de porcentajes sin sesgar proporciones de fotos, consulte los siguientes métodos:

• Método 1: Use el estilo en línea en HTML
• Método 2: Usar propiedades CSS

Método 1: Use el estilo en línea en HTML

Los usuarios pueden agregar la imagen en una página HTML con la ayuda del "" elemento. Además, para especificar el "ancho" y "altura"De la imagen sin sesgar, debe establecer la altura y el ancho de la imagen en el porcentaje. Para implicaciones prácticas, siga los pasos que sean a continuación.

Paso 1: crear un contenedor Div
Primero, crea un "div"Contenedor utilizando el"" elemento. Además, agregue un "estilo"Atributo para usar las propiedades CSS en HTML para el estilo en línea. Luego, establezca el valor del estilo como el "altura"Con el valor"600px" y "ancho" como "1000px".

Paso 2: Agregue una imagen
Luego, utiliza el "img"Etiqueta para agregar una imagen dentro del elemento Div. Además, agregue el siguiente atributo entre el título de IMG:

• "SRC"Se usa para insertar el archivo de medios.
• El "altura" y "ancho"Ambos se usan para determinar el tamaño de la imagen. Para hacerlo, el valor de estas propiedades se establece en porcentaje:

Se puede observar que la imagen se agrega con éxito después de especificar el ancho y la altura en forma de porcentaje:

Método 2: Usar propiedades CSS

Los usuarios también pueden especificar el "altura" y "ancho"Como porcentajes en CSS. Para hacerlo, intente las instrucciones dadas.

Paso 1: Haz un contenedor Div
Inicialmente, haga un contenedor "div" con la ayuda del "" elemento. Además, inserte un atributo de clase dentro de la etiqueta de apertura del div con un nombre particular.

Paso 2: inserte una imagen
A continuación, utilice el ""Etiqueta para insertar una imagen en la página HTML. Luego, agregue el "SRC"Atributo a la etiqueta de imagen utilizada para insertar el archivo multimedia. Por ejemplo, hemos especificado el nombre de la imagen como el valor del atributo "SRC":

Paso 3: Contenedor de estilo "Div"
Ahora, acceda al contenedor Div utilizando el nombre de la clase ".IMG-Container":

.img-continer
margen: 20px;

Luego, aplique el "margen"Para configurar el espacio fuera del elemento.

Paso 4: Establezca la imagen "altura" y "ancho"
Luego, acceda a la imagen con la ayuda de "img":

img
Altura: 70%;
Ancho: 50%;

Especifica el "altura" y "ancho"Propiedades y establecer el valor de estas propiedades en el porcentaje requerido.

Eso se trataba de especificar la altura y el ancho en el porcentaje.

Conclusión

Para especificar la altura y el ancho en porcentaje sin sesgar la proporción de fotos en HTML, primero, haga un contenedor "Div" utilizando el "

" elemento. A continuación, agregue la imagen con la ayuda del "" etiqueta. Después de eso, inserte el "ancho" y "altura"Atributos dentro del elemento" "y establece el valor de estos atributos en porcentaje. Este artículo le guió sobre especificar el ancho y la altura en porcentaje sin sesgar las proporciones de las fotos.