CSS RESEA/EFECTO DEL APLICADO en la imagen mientras mantiene las dimensiones

Las imágenes son la parte más importante y crucial del desarrollo web. A veces, los desarrolladores web agregan diversos efectos en las imágenes para que la página web sea más atractiva, incluida la voltea las imágenes, el acercamiento, el zoom de los efectos, etc. Más específicamente, en el proceso de zoom, una imagen se hace más grande según los requisitos. En un visor de imágenes, el proceso de zoom es muy importante. Para obtener este proceso, los usuarios pueden usar el "escala()" y "traducir()" métodos.

Este artículo examinará:

• Cómo insertar una imagen en HTML?
• Cómo cambiar el tamaño/efecto de zoom en una imagen mientras mantiene las dimensiones en CSS?

Cómo insertar una imagen en HTML?

Para agregar una imagen en HTML, los usuarios deben seguir estos pasos establecidos.

Paso 1: crear un contenedor "div"

Primero, utilice el "div"Elemento para crear un contenedor" div ". Luego, inserte un atributo de clase y especifique un nombre en particular para él

Paso 2: Agregue una imagen

A continuación, agregue una imagen con la ayuda del "" etiqueta. Dentro de la etiqueta IMG, especifique los siguientes atributos:

• "SRCEl atributo se utiliza para agregar un archivo multimedia.
• "alternativo"Se utiliza para mostrar el texto en una imagen cuando la imagen no se muestra debido a alguna razón:

Se puede observar que se ha agregado una imagen con éxito:

Cómo cambiar el tamaño/efecto de zoom en una imagen mientras mantiene las dimensiones en CSS?

Para cambiar el tamaño/zoom en efecto en una imagen mientras mantiene las dimensiones, acceda a la imagen con un ":flotar"Efecto, y aplique"transformar"Con valor"escala (2.0)"

Pruebe las instrucciones dadas que se mencionan a continuación para hacerlo.

Paso 1: diseñe el contenedor "div"

Acceda al contenedor "Div" utilizando el nombre de la clase ".IMG-Content"Y aplique las propiedades CSS enumeradas a continuación:

.IMG-Content
Pantalla: bloque en línea;
desbordamiento: inicial;
margen: 20px 100px;
relleno: 40px;
Ancho: 300px;
Altura: 300px;
Color de fondo: RGB (233, 146, 16);

Aquí:

• "mostrarSe utiliza la propiedad para configurar la pantalla para una imagen. Para hacerlo, el valor de esta propiedad se establece como un "bloqueo en línea".
• "Desbordamiento"Controla el contenido que es largo para adaptarse a un área.
• "margen"Define un espacio en el lado más externo del límite del elemento.
• "relleno"Se usa para asignar espacio dentro del área definida.
• "ancho"Se utiliza para configurar el ancho del elemento.
• "altura"La propiedad asigna la altura particular para un elemento.
• "color de fondo"Especifica un color para la parte posterior de un elemento.

Producción

Paso 2: Aplicar flotante en la imagen

Imagen de acceso con efecto flotante como "IMG: Hover":

img: hover
Transformar: escala (2.0);

Luego, aplique el "transformarPropiedad que se utiliza para establecer la transformación 2D o 3D para un elemento. Para ese propósito, el valor de esta propiedad se establece como escala (2.0). Más específicamente, el "escala()La función CSS se utiliza para definir la transformación que se utiliza para cambiar el tamaño del elemento en el plano 2D.

Producción

Eso se trata de esta publicación para el efecto de zoom en una imagen mientras mantiene las dimensiones.

Conclusión

Para cambiar el tamaño/zoom en efecto en una imagen, primero inserte una imagen en la página HTML, luego aplique las propiedades de CSS, que incluyen "mostrar"Para establecer la visualización del elemento y"Desbordamiento", Que se utiliza para controlar el contenido que es demasiado grande para encajar en un área. Después de eso, acceda a la imagen con el ":flotar"Efecto y aplique la propiedad de transformación con el valor"escala (2.0)"Para cambiar el tamaño del elemento en el avión 2d. Esta publicación ha explicado el método para cambiar el tamaño/zoom en efecto sobre una imagen mientras mantiene la dimensión.