Como redimensionar a imagem em CSS

Enquanto desenvolvemos um site, geralmente utilizamos as imagens baixadas da Internet. No entanto, existe a chance de a imagem baixada não estar no tamanho adequado. Em tal situação, a solução ideal é redimensionar a imagem desejada.

Existem várias maneiras de redimensionar uma imagem; Vá para CSS quando se trata de encontrar a maneira mais rápida e eficiente. O CSS oferece propriedades diferentes que podem ser utilizadas para redimensionar imagens de acordo com suas preferências.

Este artigo demonstrará os métodos de redimensionar imagens usando CSS.

Como redimensionar uma imagem no CSS?

No CSS, você pode usar as seguintes propriedades para redimensionar uma imagem:

• Propriedades de altura e largura
• Propriedade de Objeto-Fit
• propriedade de tamanho de fundo

Vamos passar por cada um dos métodos mencionados um por um!

Método 1: Use propriedades de altura e largura para redimensionar a imagem no CSS

No CSS, a propriedade de altura é utilizada para ajustar a altura dos elementos HTML. Da mesma maneira, a propriedade de largura é bastante útil para o ajuste da largura dos elementos.

Se você está disposto a mudar o “altura”Da imagem e confira a seguinte sintaxe:

Altura: 85%;

Aqui, "85%”Representa o valor da propriedade de altura.

No entanto, para mudar a imagem “largura”, Defina seu valor de acordo com suas preferências:

largura: 85%;

Observação: Usando o “auto”Como o valor das propriedades de altura e largura ajudará a manter a capacidade de resposta da imagem em relação a diferentes dispositivos.

No entanto, às vezes, é necessário redimensionar a imagem horizontal e verticalmente. Se for esse o caso, você pode atribuir um valor específico às propriedades de altura e largura.

Exemplo

Neste exemplo, redimensionaremos a seguinte imagem:

Agora, para redimensionar a imagem fornecida, definiremos o valor da propriedade de altura como “55%"E largura como"70%”No arquivo CSS:

Especifique a fonte da imagem “src" no "”Tag do arquivo html:

Redimimos com sucesso a imagem usando as propriedades mencionadas.

Método 2: Use a propriedade Object-Fit para redimensionar a imagem no CSS

No CSS, o “Objeto-ajuste”A propriedade é usada para ajustar uma imagem ao seu contêiner automaticamente. Usando esta propriedade, podemos fazer com que uma imagem seja ajustada no contêiner com os valores alistados:

• preencher: Se a imagem for esticada em relação ao recipiente, ela poderá ser redimensionada para caber no contêiner.
• conter: Usando esse valor de propriedade, a imagem selecionada mantém sua proporção; No entanto, é redimensionado para se encaixar dentro do contêiner.
• cobrir: Permite que a imagem cubra o contêiner inteiro.
• nenhum: O tamanho da imagem permanece o mesmo.
• diminuir gradativamente: Quando o valor da propriedade Object-Fit é definido como reduzido, ele verifica se a imagem deve permanecer do mesmo tamanho ou ser redimensionada para caber no contêiner.

Exemplo

Utilizaremos a mesma imagem e definiremos seu valor de propriedade de objetos como “conter”. Como resultado, a imagem selecionada manterá sua proporção, mas será redimensionada para se encaixar no mesmo contêiner:

Imagem com sucesso ajustada dentro do contêiner. No entanto, você pode usar cobertura, preenchimento ou escala para alcançar a dimensão da imagem desejada:

Método 3: Use a propriedade de tamanho de fundo para redimensionar a imagem no CSS

Para redimensionar uma imagem de fundo no CSS, você pode simplesmente usar o “tamanho de fundo" propriedade. Esta propriedade é ideal para o ajuste de imagens de fundo.

Antes de pular mais fundo, dê uma olhada na descrição de seus diferentes valores:

• auto(Valor padrão): Ao definir a propriedade de tamanho de fundo como “auto”, A imagem permanecerá em seu tamanho original.
• cobrir: Este valor força a imagem para cobrir o contêiner inteiro se houver algum espaço.
• conter: Para garantir que a imagem esteja totalmente visível, use “conter”Como o valor da propriedade de tamanho de fundo.

Exemplo

Vamos agora redimensionar o “Imagem.png”Ao definir o valor de sua propriedade de tamanho de fundo como“conter”. Além disso, para evitar a repetição da imagem, vamos usar o “fundo de repetição”Propriedade e defina seu valor como“sem repetir”. Além disso, "250px”É necessário preencher para encaixar o conteúdo dentro do contêiner.

Aqui, o exemplo é um “eu ia" do "div”Container:

Em seguida, atribuindo o “exemplo”Id ao e adicione algum texto usando

marcação:

TEXTO

O valor especificado da propriedade de tamanho de fundo tornará a imagem totalmente visível. No entanto, você pode definir qualquer valor de acordo com suas preferências:

Fornecemos as instruções necessárias relacionadas a redimensionar uma imagem no CSS.

Conclusão

Para redimensionar a imagem usando CSS, você pode usar a propriedade de altura ou largura. A propriedade de ajuste de objeto CSS também pode ajudar na instalação de uma imagem em relação ao seu contêiner. O uso da propriedade Object-Fit ajudará você a realizar a ressecção automática da imagem. Além disso, a propriedade de tamanho de fundo também pode ser utilizada para o propósito mencionado. Este artigo descreveu os dois métodos eficientes de redimensionar uma imagem no CSS.