Cortar uma imagem em HTML

Neste artigo, apresentaremos métodos para cortar uma imagem em HTML.

Use as propriedades CSS width, height e overflow para recortar a imagem em HTML

Junto com width e height, os contêineres CSS também têm uma propriedade overflow que pode ser usada para recorte de imagem. Para ativar a propriedade overflow, devemos colocar a imagem dentro de um div de uma largura e altura específicas e definir overflow como hidden. Isso garantirá que o contêiner básico manterá sua estrutura e qualquer estouro de imagem ficará oculto atrás do contêiner. Por último, podemos usar a propriedade margin para ajustar a área recortada. Esta propriedade assume quatro valores. No entanto, apenas o primeiro e o último dos quatro valores são essenciais, pois representam os pixels do topo e da esquerda, respectivamente.

Por exemplo, insira a imagem com o URL https://tinyurl.com/k764en3w em dois contêineres diferentes. Dê à segunda imagem uma classe recortada para que possamos aplicar alguns estilos a ela e recortar a imagem. Em CSS, selecione a classe recortada e defina height e width como 150px. Defina a propriedade overflow como hidden. Em seguida, crie uma borda. Agora, selecione a tag img da classe cropped e defina sua margem como margin: -10px 0px 0px -180px.

Desta forma, podemos cortar uma imagem em HTML usando CSS.

Código de exemplo:

<h3> Original image: </h3>
<img
    src="https://tinyurl.com/k764en3w"
    >
<h3> Cropped image: </h3>
<div class="cropped">
    <img
        src="https://tinyurl.com/k764en3w"
        >
</div>

.cropped {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border: 5px solid black;
}

 .cropped img {
     margin: -10px 0px 0px -180px;
}

Use as propriedades CSS object-fit para recortar a imagem em HTML

A propriedade CSS object-fit ajuda a recortar as imagens. Pode ter cinco valores, mas o valor cover é o mais adequado para recortar uma imagem. Definir object-fit para cover preservará a proporção da imagem enquanto se ajusta ao tamanho da caixa de conteúdo. Também podemos usar a propriedade object-fit em conjunto com object-position para ajustar a área da imagem a recortar. A propriedade object-position requer dois valores: x% e y% para posicionar a imagem (a posição padrão é 50% 50%). Também podemos fornecer posições de pixel: xpx e ypx, mas isso geralmente não é útil.

Por exemplo, insira a imagem três vezes. A primeira foto é a foto original e as duas fotos serão as fotos cortadas. Dê as classes cropped1 e cropped2 para a segunda e terceira fotos. Defina uma largura, altura e borda específicas para essas imagens. Use a propriedade object-fit e defina-a para cover em ambas as imagens. Na terceira imagem, defina a propriedade object-position para 20% 10%.

Desta forma, podemos cortar uma imagem em HTML usando CSS.

Código de exemplo:

<div>
    <h3> Original image: </h3>
    <img src="https://tinyurl.com/k764en3w">
    <h3> Cropped image using object-fit: </h3>
    <img
        class="cropped1" src="https://tinyurl.com/k764en3w">
    <h3> Cropped image adjusted with object-position: </h3>
    <img
        class="cropped2" src="https://tinyurl.com/k764en3w"> 
</div>

.cropped1 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border: 5px solid black;
}
 .cropped2 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     object-position: 20% 10%;
     border: 5px solid black;
}