Responsive image issue in materializecss - html

Question

I am creating a website with materializecss and having some issue with FAB and responsive image. For FAB issue I already did a post here.
floating button issue in material css
But I need some help for responsive image. Its always coming in oval shape. Ii I use respoonsive image in collection it is working fine. Not sure how to get a prefect shape,
html :
<div class="user-feed-main-box box">
<ul class="collection">
<li class="collection-item avatar">
<img src="" alt="" class="circle">
<span class="title"><p>user Shared a post Art </p></span>
<p> <label for="icon_prefix"><i class="material-icons left">timer</i>a min ago.</label> <br>
</p>
</li>
</ul>
<div class="row">
<div class="col s2">
<div class="container">
<img src="" alt="" class="responsive-img circle">
</div>
</div>
<div class="col">
<p>User Shared a post Art </p>
<label for="icon_prefix"><i class="material-icons left">timer</i>a min ago.</label>
</div>
</div>
<div class="container">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam eos in ea dolor eligendi repudiandae
praesentium
modi. Consequuntur, accusantium culpa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni
sapiente ipsa amet eos officiis aperiam atque. Nemo corporis quibusdam ipsa placeat voluptate fugiat fuga
veniam possimus maxime doloremque veritatis ullam quam odit eligendi, id, sequi quas consequuntur
perferendis accusamus, harum culpa quis animi. Minima, est minus? Optio dolor mollitia perspiciatis.</p>
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img
src=""></a>
<a class="carousel-item" href="#two!"><img
src=""></a>
<a class="carousel-item" href="#three!"><img
src=""></a>
<a class="carousel-item" href="#four!"><img
src=""></a>
<a class="carousel-item" href="#five!"><img
src=""></a>
</div>
</div>
</d

Answer 1

There was a reported issue similar to this in the Materialize GitHub repo. It appears the solution for that was to not use materialize and instead implement the below.
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
And then change the img html to
<div class="ratio img-responsive img-circle" style="background-image:url('somepicture.jpg');"></div>