Solucionado
Oi gente, tudo joia ? Estou precisando de um HELP. Estou utilizando uma imagem e consegui colocar o tamanho que preciso que ela fique, porém a imagem é muito grande e está comprimindo para caber no espaço que eu preciso. E eu gostaria que ela fosse recortada e não que ela fosse comprimida. Fiz um exemplo de como está e de como eu gostaria que ficasse: https://prnt.sc/usq4u7
Alguém pode me dizer a tag para utilizar o recorte no CSS ? Não consegui encontrar. Obrigado.
Estava com essa mesma dúvida outro dia. Felizmente da sim para fazer esse recorte no CSS, inclusive acho que o instagram usa ele na hora de exibir as suas fotos no perfil (já que todas ficam quadradas mesmo se forem retangulares) então é algo que parece bem útil para trabalhar galerias.
Li sobre isso aqui:
https://www.educative.io/edpresso/how-to-crop-an-image-in-css
O código para fazer isso é esse aqui:
HTML
<html>
<head>
</head>
<body>
<div>
<h3> Original image: </h3>
<img
src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*"
>
<h3> Cropped image using object-fit: </h3>
<img
class="cropped1"
src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*"
>
<h3> Cropped image adjusted with object-position: </h3>
<img
class="cropped2"
src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*"
>
</div>
</body>
</html>CSS
.cropped1 {
width: 200px; /* width of container */
height: 200px; /* height of container */
object-fit: cover;
border: 5px solid black;
}
.cropped2 {
width: 200px; /* width of container */
height: 200px; /* height of container */
object-fit: cover;
object-position: 20px 10px; /* try 20% 10% */
border: 5px solid black;
}
Basicamente você define o tamanho da sua "janela" e depois escolhe qual parte da imagem vai ser exibida.
Tudo pelo CSS.
Da para copiar esse código e ir testando aí na sua casa como ele reage e etc, só fazer o .html e o .css na sua pasta e linkar eles.
Caraca, muito obrigado Alves!!! Era exatamente isso que eu queria rsrsrs, brigadão!