2
I wanted to finish cutting the image in css completely and remove all edges, but I can only cut at the bottom and right side. I wanted to know how I could do to cut through, here’s the code I’m 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>
1
Marcelo this happens because his image is not centered inside the div. If you center your image inside the div you can cut it equally on all sides!
OBS: You don’t need clip:rect even because this property has fallen into disuse https://developer.mozilla.org/en-US/docs/Web/CSS/clip. Now the indicated is to use clip-path:polygon according to the W3C https://www.w3.org/TR/css-masking-1/#propdef-clip-path
See in the example and test there that you will see that it is right! Here I am centering an image of 200px in a div.clip of 100px and "cutting" what remains centrally.
.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>Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
HTML was missing as well
– Sveen
<body> <div><img src="TESTE.jpg"></div> </body> and is a normal html with a div and a <img>
– Marcelo Henrique Dos Reis