Due to an error I created this irregular border for an image that I have to be honest I really like.
Look at the code in the snippet.
How beautiful it’s the results!
.smoothed {
height: 140px !important;
/* background: red; */
border-radius: 50%;
padding: 10px 3px 38px 1px;
}
html, body { background-color: black; color: white; font-family: sans-serif; }<p>GOOD RESULT</p>
<img src="https://i.pinimg.com/236x/53/f7/45/53f745aad228c9eddb1adc8bd212cca1.jpg" class="smoothed">
<p>BAD RESULT</p>
<img src="https://as2.ftcdn.net/v2/jpg/00/53/72/03/1000_F_53720345_h0zZ8cKmJZyPoKTnn2bsjArj00zn49hc.jpg" class="smoothed">But the problem is that it works correctly only for square images.
Also I have difficulty putting it in a p paragraph or in another tag like for example <h1> with the same size as the text (talking about the height).
Can someone help me standardize the result so that it works for all images with any size and that it can be put in a tag like <h1> so that the part of the image displayed is roughly a circle? (Can you also use others tags in which to wrap img before putting it in h1 the important thing is that it works.
>Solution :
- aspect-ratio :
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio - object-fit
:https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit - object-position
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
might help
Possible fix :
.smoothed {
height: 140px !important;
aspect-ratio:1;
/* background: red; */
border-radius: 50%;
padding: 10px 3px 38px 1px;
object-fit:cover;
object-position: top center;
}
html, body { background-color: black; color: white; font-family: sans-serif; }<p>GOOD RESULT</p>
<img src="https://i.pinimg.com/236x/53/f7/45/53f745aad228c9eddb1adc8bd212cca1.jpg" class="smoothed">
<p><del>BAD</del> RESULT</p>
<img src="https://as2.ftcdn.net/v2/jpg/00/53/72/03/1000_F_53720345_h0zZ8cKmJZyPoKTnn2bsjArj00zn49hc.jpg" class="smoothed">If it does not render circles, it is because of the padding and border-box defaut value