materializecss 中的响应式图像问题

Question

我正在创建一个具有 materializecss 的网站，并且在 FAB 和响应式图像方面存在一些问题。对于 FAB 问题，我已经在这里发过帖子了。

floating button issue in material css

但我需要一些关于响应式图像的帮助。它总是呈椭圆形。 Ii 我在集合中使用响应式图像，它工作正常。不知道如何获得完美的形状，

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><a href="#one!">user</a> Shared a post <a href="#one!">Art</a> </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><a href="#one!">User</a> Shared a post <a href="#one!">Art</a> </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

Materialize GitHub repo 中有一个与此类似的reported issue。看来解决方案是不使用具体化，而是实现以下内容。

  .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%;
  }

然后把imghtml改成

<div class="ratio img-responsive img-circle" style="background-image:url('somepicture.jpg');"></div>