How to crop a rectangular image without distortion: use object-fit: cover css property
Example:
<img id="profile-pic"src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="">
#profile-pic {
width: 200px;
height: 200px;
object-fit: cover;
/* border-radius: 50%; */
}You can use the background-image: url("https://some.website.com/some_picture.jpg") css proeprty. Try it out here!
Use @supports to check if the current browser supports certain feature or not (and fallback gracefully if some feature is not supported)