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:
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í:
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:
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í:
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.