I wanted to finish cropping the image in css completely and removed all edges, but I can only cut it down and the right side. I wanted to know how I could do to cut completely, here is the code I am using and the image.
css:
div {
border: 1px solid #000;
float: left;
margin: 10px;
overflow: hidden;
height: 78px;
width: 78px;
}
div img {
clip:rect(110px,30px,300px,0px);
}
html:
<body> <div><img src="TESTE.jpg"></div> </body>
Marcelo this happens because his image is not centered within the div. If you centralize your image inside the div you can cut it equally on all sides!
OBS: Does not need clip:rect because this property has fallen into disuse link . Now you are prompted to use clip-path:polygon according to W3C link
See the example and test there that you will see that it works! Here I am centering an image of 200px on a div.clip of 100px and "cutting" what is left in a centralized way.
.clip {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
overflow: hidden;
}
.clip img {
width: 200px;
height: 200px;
}<div class="clip"><img src="http://placecage.com/200/200"alt=""></div>