A imagem da força CSS redimensiona e mantenha a proporção

Ao projetar sites, os desenvolvedores estão sempre procurando maneiras de ajustar a página da web para que as imagens ou outros componentes apareçam perfeitamente em cada tamanho de tela. Mais especificamente, a folha de estilo em cascata ou CSS ajuda a dar uma olhada adequada para as páginas da web. Ele fornece propriedades e propriedades de estilo que ajudam a manter o layout, o tamanho e a proporção das imagens.

Este artigo demonstrará três seguintes três métodos:

• Método 1: A imagem de força redimensiona e mantenha a proporção de aspecto usando “largura" e "alturaPropriedades do CSS
• Método 2: Força a imagem redimensiona e mantenha a proporção usando “Objeto-ajustePropriedade CSS
• Método 3: A imagem de força redimensiona e mantenha a proporção de aspecto usando “Exibição: flexPropriedade CSS

Pré -requisito: Adicione a imagem ao arquivo HTML

Antes de seguir em frente, especifique o “”Elemento no arquivo HTML para adicionar uma imagem ao documento:

Método 1: Força a imagem de imagem e mantenha a proporção usando as propriedades "largura" e "altura" CSS

O "largura" e "altura”As propriedades podem ser utilizadas para ajustar a imagem. Além disso, a propriedade de largura com um valor especificado e a propriedade de altura com auto ou vice -versa podem ajudar a redimensionar a imagem e manter a proporção.

Elemento de estilo “img”

O "”O elemento é especificado com as seguintes propriedades:

img
Largura: 400px;
Altura: Auto;

Aqui:

• ““largura”Determina a largura da imagem.
• ““altura”Define a altura da imagem.

Saída

Vamos agora definir a largura como automático e ver os resultados.

No CSS, defina o “altura”Propriedade com algum valor e“largura" como "auto”:

Altura: 400px;
Largura: Auto;

A saída fornecida significa que a imagem foi redimensionada e a proporção também é mantida:

Método 2: Força a imagem de imagem e mantenha a proporção de aspecto usando a propriedade CSS “Object-Fit”

O CSS “Objeto-ajuste”Propriedade com o valor“conter”Pode ser utilizado para ajustar a imagem sem afetar sua proporção.

Para fazer isso, aplique as seguintes propriedades CSS ao HTML adicionado “" Elemento:

Largura: 400px;
Altura: 400px;
Objeto-ajuste: conter;

O "Objeto-ajuste”Propriedade com o valor“conter”Especifica como uma imagem ou vídeo deve ser redimensionado para caber em seu contêiner.

Saída

Método 3: Força a imagem da imagem e mantenha a proporção de aspecto usando a propriedade CSS "Display: Flex"

O "mostrar”Propriedade com o valor“flex”Coloca os itens do recipiente flexível em uma linha (por padrão).

Exemplo

Em primeiro lugar, adicione um “"Com a classe"principal”. Então:

• Adicione duas imagens usando as tags "".
• O "src" e a "alt”Os atributos são mencionados para o URL da imagem e o texto alternativo da imagem se, em qualquer caso, a imagem não puder exibir:

Classe de estilo “Principal”

O ".principal”É usado para acessar o elemento“ ”com o nome de classe especificado. As seguintes propriedades são aplicadas a ele:

.principal
exibição: flex;
largura: 100%;

Aqui:

• ““mostrar”Propriedade com o valor“flex”Coloca as imagens em uma fila.
• ““larguraA propriedade determina a largura do contêiner flexível.

Elemento de estilo "IMG" da classe "principal"

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

O "img”O elemento contém o“50%"Largura e a"altura"É definido como"auto”E ajusta a altura do contêiner automaticamente.

Saída

Você aprendeu a forçar as imagens a redimensionar e manter a proporção no CSS.

Conclusão

Existem maneiras alternativas de redimensionar a imagem e manter sua proporção no CSS, como definir um valor específico do “largura”Propriedade e a“auto”Valor para o“alturaPropriedade da imagem ou vice -versa. O CSS “Objeto-ajuste”Propriedade com o valor“conter”É o melhor método. Além disso, o “Exibição: flex”A propriedade também pode ser usada para manter a proporção da imagem. Este artigo explicou os métodos para demonstrar como redimensionar uma imagem e manter sua proporção em CSS.