Como cortar uma imagem usando CSS

Este artigo discutirá:

• Método 1: Como cortar uma imagem através da propriedade "Overflow: Hidden"?
• Método 2: Como cortar uma imagem através da propriedade “Background-Image”?
• Método 3: Como cortar uma imagem por meio de propriedades de "posição de objetos" e "objeto"?

Pré -requisito: Criando um arquivo HTML

Para incorporar uma imagem no documento HTML, siga as instruções mencionadas:

• Adicione um “”Tag para criar uma divisão e atribuir uma classe“IMG-CROP-DIV”. Implementar o “estilo”Atributo para definir o elemento“margem" propriedade.
• Em seguida, utilize a tag html com os atributos "SRC", "Width" e "Height" para incorporar uma imagem no documento.
• O "src”Atributo define o URL de origem.
• O "largura”Define a largura da imagem.
• O "altura”Determina a altura da imagem.

Html

Pode -se observar que adicionamos com sucesso a imagem à nossa página da web:

Método 1: Como cortar uma imagem através da propriedade "Overflow: Hidden"?

Quando o conteúdo do elemento é muito grande para se encaixar na área designada, o “transbordar”Propriedade é definida para adicionar barras de rolagem. Além disso, também pode ser utilizado para cortar a imagem adicionada.

Para uma melhor compreensão, vamos estilizar nosso contêiner.

Estilo “IMG-Crop-Div”

O ".IMG-CROP-DIV”Está definido para acessar a classe“IMG-CROP-DIV”. O "altura" e "largura”As propriedades do CSS são utilizadas para alocar a área de imagem. Então, a área restante é cortada usando o “transbordar”Propriedade CSS junto com o valor“escondido”.

Saída

Ajuste a posição da imagem cortada

Agora, veremos como ajustar a posição da imagem:

Utilizando o “margem”Propriedade com os valores especificados para a parte superior, direita, esquerda e fundo nos ajudou a ajustar a posição.

Saída

Método 2: Como cortar uma imagem através da propriedade “Background-Image”?

O "imagem de fundo”A propriedade CSS é usada para especificar as imagens de fundo. No entanto, uma imagem pode ser cortada usando esta propriedade. Para fazer isso, primeiro, defina a largura e a altura da contenção de uma imagem. Como resultado, a imagem será mostrada na área especificada.

Vamos implementar o cenário acima discutido no CSS:

Aqui o "posição de fundo”A propriedade é utilizada para ajustar a posição inicial da imagem.

Saída

Como cortar uma imagem através de propriedades de “ajuste de objeto” e “posição de objetos”?

CSS “Objeto-ajuste”A propriedade pode ser especificada para cortar imagens facilmente. Tem cinco valores, mas o “cobrir”É o mais apropriado a ser usado para cortar imagens.

No CSS, adicione o seguinte snippet de código para o “IMG-CROP-DIV" aula:

Aqui está a descrição das propriedades dadas:

• Usando o “Objeto-ajuste: capa”Valor da propriedade, a proporção da imagem é mantida enquanto ainda se encaixa na caixa de contêineres.
• O "posição de objeto”Propriedade define a área da imagem para cortar.

Saída

Nós compilamos os métodos para cortar uma imagem usando CSS.

Conclusão

Para cortar uma imagem em HTML, várias propriedades CSS podem ser utilizadas. As propriedades mais usadas para cultivar imagens são “transbordar" com "largura" e "altura","imagem de fundo","Objeto-ajuste", e "posição de objeto”. Este post descreveu vários métodos para cortar uma imagem usando CSS.