CSS redimensiona/efeito zoom na imagem enquanto mantém as dimensões

As imagens são a parte mais importante e crucial do desenvolvimento da web. Às vezes, os desenvolvedores da web adicionam vários efeitos nas imagens para tornar a página da web mais atraente, incluindo virar as imagens, aumentar o zoom, aumentar os efeitos e assim por diante. Mais especificamente, no processo de zoom, uma imagem fica maior conforme o requisito. Em um visualizador de imagem, o processo de zoom é muito importante. Para obter esse processo, os usuários podem usar o “escala()" e "traduzir()" métodos.

Este artigo examinará:

• Como inserir uma imagem em html?
• Como redimensionar/zoom-in-in uma imagem enquanto mantém as dimensões em CSS?

Como inserir uma imagem em html?

Para adicionar uma imagem no HTML, os usuários devem seguir estas etapas declaradas.

Etapa 1: Crie um contêiner "div"

Primeiro, utilize o “div”Elemento para criar um contêiner“ div ”. Em seguida, insira um atributo de classe e especifique um nome específico para ele

Etapa 2: adicione uma imagem

Em seguida, adicione uma imagem com a ajuda do “" marcação. Dentro da tag IMG, especifique os seguintes atributos:

• ““src”O atributo é usado para adicionar um arquivo de mídia.
• ““alt”É utilizado para mostrar o texto em uma imagem quando a imagem não é exibida devido a algum motivo:

Pode -se observar que uma imagem foi adicionada com sucesso:

Como redimensionar/zoom-in-in uma imagem enquanto mantém as dimensões em CSS?

Para redimensionar/zoom em vigor em uma imagem enquanto mantém as dimensões, acesse a imagem com um “:flutuar”Efeito e aplicar“transformar"Com valor"escala (2.0)”

Experimente as instruções dadas mencionadas abaixo para fazer isso.

Etapa 1: estilo o contêiner "div"

Acesse o contêiner "div" usando o nome da classe ".Content IMG”E aplique as propriedades CSS listadas abaixo:

.IMG-Content
Exibição: bloco embutido;
estouro: inicial;
margem: 20px 100px;
preenchimento: 40px;
Largura: 300px;
Altura: 300px;
cor de fundo: RGB (233, 146, 16);

Aqui:

• ““mostrar”A propriedade é utilizada para definir a tela para uma imagem. Para fazer isso, o valor desta propriedade é definido como um “Block inline”.
• ““transbordar”Controla o conteúdo que é demorado para se encaixar em uma área.
• ““margem”Define um espaço no lado mais externo do limite do elemento.
• ““preenchimento”É usado para alocar espaço dentro da área definida.
• ““largura”É utilizado para definir a largura do elemento.
• ““altura”Propriedade aloca a altura específica para um elemento.
• ““cor de fundo”Especifica uma cor para a parte traseira de um elemento.

Saída

Etapa 2: Aplique o mouse

Acesse a imagem com efeito de pairar como “IMG: Passe o mouse”:

IMG: Hover
Transformar: escala (2.0);

Então, aplique o “transformar”Propriedade utilizada para definir a transformação 2D ou 3D para um elemento. Para esse fim, o valor desta propriedade é definido como escala (2.0). Mais especificamente, o “escala()”A função CSS é usada para definir a transformação que é utilizada para redimensionar o elemento no plano 2D.

Saída

Isso é tudo sobre este post para o efeito de zoom em uma imagem, mantendo as dimensões.

Conclusão

Para redimensionar/zoom em vigor em uma imagem, primeiro insira uma imagem na página HTML e depois aplique as propriedades do CSS, incluindo “mostrar”Para definir a exibição do elemento e“transbordar”, Que é utilizado para controlar o conteúdo grande demais para se encaixar em uma área. Depois disso, acesse a imagem com o “:flutuar”Efeito e aplique a propriedade Transform com o valor“escala (2.0)”Para redimensionar o elemento no avião 2D. Este post explicou o método para redimensionar/zoom em vigor em uma imagem enquanto mantém a dimensão.