时间戳

首页 > 解决方案 > materializecss 中的响应式图像问题

html - materializecss 中的响应式图像问题

问题描述

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

材质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

标签： htmlcssmaterial-designmaterialize

解决方案

在Materialize GitHub 存储库中报告了与此类似的问题。看来解决方案是不使用物化，而是实现以下内容。

  .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>

推荐阅读