CSS Force Image RESEA y Mantenga la relación de aspecto

Mientras diseñan sitios web, los desarrolladores siempre están buscando formas de ajustar la página web para que las imágenes u otros componentes se muestren perfectamente en cada tamaño de pantalla. Más específicamente, la hoja de estilo en cascada o CSS ayuda a hacer un aspecto adecuado para las páginas web. Proporciona propiedades y propiedades de diseño que ayudan a mantener el diseño, el tamaño y la relación de aspecto de las imágenes.

Este artículo demostrará tres siguientes tres métodos:

• Método 1: Cambiar el tamaño de la imagen de fuerza y ​​mantener la relación de aspecto usando "ancho" y "altura"Propiedades CSS
• Método 2: Cambiar el tamaño de la imagen de fuerza y ​​mantener la relación de aspecto usando "ajuste de objeto"Propiedad CSS
• Método 3: Forzar el cambio de tamaño de la imagen y mantener la relación de aspecto usando "Pantalla: Flex"Propiedad CSS

Requisito previo: Agregar imagen al archivo HTML

Antes, avanzando, especifique el "Elemento "en el archivo HTML para agregar una imagen al documento:

Método 1: Cambiar la imagen de la imagen de fuerza y ​​mantener la relación de aspecto utilizando las propiedades CSS de "ancho" y "altura"

El "ancho" y "alturaLas propiedades se pueden utilizar para ajustar la imagen. Además, la propiedad de ancho con un valor específico y la propiedad de altura con auto o viceversa podría ayudar a cambiar el tamaño de la imagen y mantener la relación de aspecto.

Elemento de estilo "img"

El "El elemento se especifica con las siguientes propiedades:

img
Ancho: 400px;
Altura: Auto;

Aquí:

• "ancho"Determina el ancho de la imagen.
• "altura"Establece la altura de la imagen.

Producción

Ahora establezcamos el ancho como auto y veamos los resultados.

En CSS, configure el "altura"Propiedad con algún valor y"ancho" como "auto":

Altura: 400px;
Ancho: Auto;

La salida dada significa que la imagen ha sido redicionada y la relación de aspecto también se mantiene:

Método 2: Cambiar la imagen de la imagen de fuerza y ​​mantener la relación de aspecto utilizando la propiedad CSS de "ajuste de objeto"

El CSS "ajuste de objeto"Propiedad con el valor"contener"Se puede utilizar para ajustar la imagen sin afectar su relación de aspecto.

Para hacerlo, aplique las siguientes propiedades de CSS al HTML agregado "" Elemento:

Ancho: 400px;
Altura: 400px;
Objeto-ajuste: contener;

El "ajuste de objeto"Propiedad con el valor"contener"Especifica cómo se debe cambiar el tamaño de una imagen o video para que se ajuste dentro de su contenedor.

Producción

Método 3: Forzar el cambio de tamaño de la imagen y mantener la relación de aspecto utilizando la propiedad CSS "Pantalla: Flex"

El "mostrar"Propiedad con el valor"doblar"Coloca los elementos del contenedor flexible en una fila (por defecto).

Ejemplo

En primer lugar, agregue un ""Con la clase"principal". Entonces:

• Agregue dos imágenes usando las etiquetas "".
• El "SRC" y el "alternativoLos atributos se mencionan para la URL de la imagen y el texto alternativo de la imagen si en cualquier caso la imagen no se puede mostrar:

Clase de estilo "principal" de estilo

El ".principal"Se usa para acceder al elemento" "con el nombre de clase especificado. Se aplican las siguientes propiedades:

.principal
Pantalla: Flex;
Ancho: 100%;

Aquí:

• "mostrar"Propiedad con el valor"doblar"Coloca las imágenes seguidas.
• "ancho"La propiedad determina el ancho del contenedor flexible.

Elemento de estilo "img" de la clase "principal"

.principal img
Ancho: 50%;
Altura: Auto;

El "img"Element sostiene el"50%"Ancho y el"altura"Está configurado como"auto”Y ajusta la altura del contenedor automáticamente.

Producción

Has aprendido a forzar a las imágenes a cambiar el tamaño y mantener la relación de aspecto en CSS.

Conclusión

Hay formas alternativas de cambiar el tamaño de la imagen y mantener su relación de aspecto en CSS, como establecer un valor específico del "ancho"Propiedad y la"auto"Valor para el"altura"Propiedad de la imagen o viceversa. El CSS "ajuste de objeto"Propiedad con el valor"contener"Es el mejor método. Además, el "Pantalla: Flex"La propiedad también se puede utilizar para mantener la relación de aspecto de la imagen. Este artículo ha explicado los métodos para demostrar cómo cambiar el tamaño de una imagen y mantener su relación de aspecto en CSS.