materializecss 中的响应式图像问题

Posted 2023-02-22

【中文标题】materializecss 中的响应式图像问题

【英文标题】：Responsive image issue in materializecss

【发布时间】：2021-01-08 14:51:18

【问题描述】：

我正在创建一个具有 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=""  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=""  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

【问题讨论】：

请将圆img添加到`border-radius:50%;`宽度特定宽度和高度相等。

这个 id 为我工作 :) codepen demo

你能添加这个CDN吗<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified javascript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

能否请您检查一下代码笔。 codepen.io/subhanan-ganguli/pen/JjXwYvN

是的，我查过了。 codepen 工作是否正确？

【参考方案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>

【讨论】：

这很好用，但不适用于小屏幕。手机屏幕太小了。