Question

现在我正在使用materializeccs卡，但我对这些卡有疑问。这里的事情是我希望卡的大小与图像高度相同，因此在调整屏幕大小时图像下方不会有空白区域。这是我现在的代码，如果屏幕变小，图像也开始变小（导致response-img类），在它下面留下越来越多的空白区域。

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <div class="col s12 m7">
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://lorempixel.com/190/100/nature/6">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

＆＃13;

这就是我需要它的方式，无论屏幕尺寸是多少，卡片高度必须与图像相同。请帮忙。谢谢大家。

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <div class="col s12 m7">
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://lorempixel.com/100/190/nature/6">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

＆＃13;

Answer 1

尝试添加此css以自定义输出：

＆＃13;

.card-stacked {
    max-height: 100px;
    display: inline-block;
}

.card .card-content {
    padding: 15px 25px !important;
}
.card-action {
padding: 5px 25px !important;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <div class="col s12 m7">
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://lorempixel.com/190/100/nature/6">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

＆＃13;

Answer 2

尝试添加类/样式：

.card-image: {
  overflow: hidden;
  max-width: 50%;
}
.card-image img {
  height: 100%;
}

.card-image: {
  overflow: hidden;
  max-width: 50%;
}
.card-image img {
  height: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <div class="col s12 m7">
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://lorempixel.com/100/190/nature/6">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

.card-image: {
  overflow: hidden;
  max-width: 50%;
}
.card-image img {
  height: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <div class="col s12 m7">
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://lorempixel.com/190/100/nature/6">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

使用img

2 个答案: