En HTML/CSS, un usuario puede agregar una imagen, videos o enlaces a un sitio web. Sin embargo, a veces los usuarios enfrentan dificultades para cambiar el tamaño de la imagen o ajustar el tamaño de la imagen sin estirarla. Para este propósito, CSS permite a sus usuarios utilizar diversas propiedades, como el "ajuste de objeto"Propiedad CSS. Esta propiedad puede llenar el tamaño de la imagen sin estirar.

Esta publicación explicará:

• Cómo agregar una imagen en HTML?
• Cómo llenar el tamaño de la imagen CSS sin estiramiento?

Cómo insertar una imagen en HTML?

Las imágenes en la página HTML se pueden adjuntar de muchas maneras. Sin embargo, el ""La etiqueta es uno de los elementos principalmente utilizados para insertar imágenes.

Si el usuario desea agregar una imagen a la página HTML, mire las instrucciones proporcionadas.

Paso 1: Agregar encabezado

Primero, agregue un encabezado usando el "

" etiqueta. Luego, agregue texto entre la etiqueta de encabezado especificada.

Paso 2: Agregar imagen

A continuación, inserte un ""Etiqueta junto con los siguientes atributos:

• El "claseEl atributo se utiliza para acceder al elemento por nombre de clase.
• El "SRCSe utiliza el atributo para agregar la ruta de imagen o URL.
• "ancho"Especifica el tamaño de la imagen horizontalmente.
• "altura"Asigna la altura de la imagen:

Añadir imagen

La salida muestra que la imagen se ha agregado con éxito:

Cómo llenar el tamaño de la imagen CSS sin estiramiento?

Para llenar el tamaño de la imagen CSS sin estirarlo, pruebe las instrucciones dadas.

Primero, acceda al ""Elemento usando".cubrir”Y aplique las siguientes propiedades de CSS:

.cubrir
Fit de objeto: cubierta;
Ancho: 50px;
margen: 20px;
Altura: 100px;

La descripción del código mencionado anteriormente es la siguiente:

• El "ajuste de objetoSe utiliza la propiedad para especificar cómo se debe cambiar el tamaño de la imagen para que se ajuste a su contenedor. Por ejemplo, hemos establecido su valor como "cubrir".
• "ancho"Especifica el tamaño del ancho de la imagen.
• "margen"Asigna el espacio alrededor del límite de un elemento.
• "altura"Define la altura de la imagen en un contenedor.

Se puede observar que la imagen ha sido redimensionada y llena sin estirar:

Eso se trataba de llenar la imagen sin estirarme.

Conclusión

Para llenar el tamaño de la imagen sin estirar, primero, agregue una imagen con la ayuda del ""Etiqueta junto con el atributo de clase. Luego, acceda a la imagen usando el nombre de clase y aplique el "ajuste de objeto"Propiedad CSS como"cubrir". Además, aplique otras propiedades de CSS para el estilo, como "ancho","altura", y "margen". Esta publicación ha demostrado el método para cambiar el tamaño y el relleno de la imagen sin estirarme.