代码之家 › 专栏 › 技术社区 › Yael Yañez

具有img的真正响应性物化横卡

responsive materialize element css html

Yael Yañez · 技术社区 · 7 年前

现在我正在使用MaterialECCS卡,但我对这些卡有一个问题。这里的问题是,我希望卡片的大小与图像高度相同,这样在调整屏幕大小时,图像下方就不会有空白。这是我现在的代码,如果屏幕变小,图像也开始变小(导致响应img类),在下面留下越来越多的空白。

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

这就是我所需要的,无论屏幕大小如何,卡片高度必须与图像相同。请帮忙。谢谢大家。

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

2 回复 | 直到 7 年前

M0ns1f 7 年前

尝试添加此 css 要自定义输出:

.card-stacked {
    max-height: 100px;
    display: inline-block;
}

.card .card-content {
    padding: 15px 25px !important;
}
.card-action {
padding: 5px 25px !important;
}

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

vytaute 5 年前

尝试添加类/样式:

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