Cómo cambiar el tamaño de la imagen en CSS

Mientras desarrollamos un sitio web, a menudo utilizamos las imágenes descargadas de Internet. Sin embargo, existe la posibilidad de que la imagen descargada no esté en el tamaño adecuado. En tal situación, la solución ideal es cambiar el tamaño de la imagen deseada.

Hay varias formas de cambiar el tamaño de una imagen; Vaya por CSS cuando se trata de encontrar la forma más rápida y eficiente. CSS ofrece diferentes propiedades que se pueden utilizar para cambiar el tamaño de las imágenes de acuerdo con sus preferencias.

Este artículo demostrará los métodos para cambiar el tamaño de las imágenes utilizando CSS.

Cómo cambiar el tamaño de una imagen en CSS?

En CSS, puede usar las siguientes propiedades para cambiar el tamaño de una imagen:

• propiedades de altura y ancho
• propiedad de ajuste de objetos
• propiedad de tamaño de fondo

Pasaremos por cada uno de los métodos mencionados uno por uno!

Método 1: Use las propiedades de altura y ancho para cambiar el tamaño de la imagen en CSS

En CSS, la propiedad de altura se utiliza para ajustar la altura de los elementos HTML. De la misma manera, la propiedad de ancho es bastante útil para el ajuste del ancho de los elementos.

Si solo está dispuesto a cambiar el "altura"De la imagen, luego consulte la siguiente sintaxis:

Altura: 85%;

Aquí, "85%"Representa el valor de la propiedad de altura.

Sin embargo, para cambiar la imagen "ancho", Establezca su valor de acuerdo con sus preferencias:

Ancho: 85%;

Nota: Utilizando el "auto"Como el valor de las propiedades de altura y ancho ayudará a mantener la capacidad de respuesta de la imagen con respecto a diferentes dispositivos.

Sin embargo, a veces, es necesario cambiar el tamaño de la imagen horizontal y verticalmente. Si ese es el caso, entonces puede asignar un valor específico a las propiedades de altura y ancho.

Ejemplo

En este ejemplo, cambiaremos el tamaño de la siguiente imagen:

Ahora, para cambiar el tamaño de la imagen dada, estableceremos el valor de la propiedad de altura como "55%"Y ancho como"70%"En el archivo CSS:

Especifique la fuente de la imagen "SRC" en el ""Etiqueta del archivo HTML:

Hemos cambiado con éxito la imagen utilizando las propiedades mencionadas.

Método 2: Use la propiedad de ajuste de objeto para cambiar el tamaño de la imagen en CSS

En CSS, el "ajuste de objetoLa propiedad se utiliza para ajustar una imagen a su contenedor automáticamente. Usando esta propiedad, podemos hacer que una imagen se ajuste al contenedor con los valores alistados:

• llenar: Si la imagen se estira con respecto al contenedor, se puede cambiar el tamaño de que se ajuste en el contenedor.
• contener: Usando este valor de propiedad, la imagen seleccionada mantiene su relación de aspecto; Sin embargo, se redimensiona para que se ajuste dentro del contenedor.
• cubrir: Permite que la imagen cubra todo el contenedor.
• ninguno: El tamaño de la imagen sigue siendo el mismo.
• escala hacia abajo: Cuando el valor de la propiedad de ajuste de objeto se establece como escalada, verifica si la imagen debe permanecer del mismo tamaño o ser cambiado de tamaño para que se ajuste dentro del contenedor.

Ejemplo

Utilizaremos la misma imagen y estableceremos su valor de propiedad de objetos como "contener". Como resultado, la imagen seleccionada mantendrá su relación de aspecto, pero se cambiará el tamaño de que se ajuste dentro del mismo contenedor:

Imagen ajustada con éxito dentro del contenedor. Sin embargo, puede usar la cubierta, el relleno o la escala hacia abajo para lograr la dimensión de imagen deseada:

Método 3: Use la propiedad de tamaño de fondo para cambiar el tamaño de la imagen en CSS

Para cambiar el tamaño de una imagen de fondo en CSS, simplemente puede usar el "tamaño de fondo" propiedad. Esta propiedad es ideal para el ajuste de imágenes de fondo.

Antes de saltar más profundo, eche un vistazo a la descripción de sus diferentes valores:

• auto(Valor predeterminado): estableciendo la propiedad de tamaño de fondo como "auto", La imagen permanecerá en su tamaño original.
• cubrir: Este valor obliga a la imagen a cubrir todo el contenedor si hay espacio.
• contener: Para asegurarse de que la imagen sea completamente visible, use "contener"Como el valor de la propiedad de tamaño de fondo.

Ejemplo

Ahora cambiaremos el tamaño del "Imagen.png"Estableciendo el valor de su propiedad de tamaño de fondo como"contener". Además, para evitar la repetición de la imagen, vamos a usar el "repetición"Propiedad y establecer su valor en"sin repetición". Además, "250pxSe necesita relleno para rellenar el contenido dentro del contenedor.

Aquí, el ejemplo es un "identificación" del "div" envase:

A continuación, asignando el "ejemploID a la y agregar algún texto usando

etiqueta:

TEXTO

El valor especificado de la propiedad de tamaño de fondo hará que la imagen sea completamente visible. Sin embargo, puede establecer cualquier valor de acuerdo con sus preferencias:

Hemos proporcionado las instrucciones necesarias relacionadas con el cambio de tamaño de una imagen en CSS.

Conclusión

Para cambiar el tamaño de la imagen con CSS, puede usar la propiedad de altura o ancho. La propiedad de ajuste de objetos CSS también puede ayudar a ajustar una imagen con respecto a su contenedor. El uso de la propiedad de ajuste de objetos lo ayudará a realizar la reducción automática de la imagen. Además, la propiedad de tamaño de fondo también se puede utilizar para el propósito mencionado. Este artículo ha descrito los dos métodos eficientes para cambiar el tamaño de una imagen en CSS.