html - 如何减小CSS卡片显示中图像的大小

Question

在点击图像时，信息会自行显示，如 this page 所示.

但在我的例子中，图像非常大，那么如何减小图像的大小以保持框小而不裁剪图像？或者即使裁剪也发生了，怎么办？

<div class="card" style="overflow: visible;">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator" src="https://dummyimage.com/1024x800/000/fff">
  </div>
  <div class="card-content">
    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
  </div>
  <div class="card-reveal" style="display: none; transform: translateY(0%);">
    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
    <p>Here is some more information about this product that is only revealed once clicked on.</p>
  </div>
</div>

Answer 1

对于具有 class="card" 的 div，手动将宽度设置为您想要的任何值。如果不设置宽度，默认为父级的 100%。

此外，您必须在 html 中包含 3 个资源，才能使 materialize.css 的所有功能正常工作:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

看下面的演示:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />


<div class="card" style="overflow: visible; width: 30%; margin: 10px auto;">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator" src="https://dummyimage.com/1024x800/000/fff">
  </div>
  <div class="card-content">
    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
  </div>
  <div class="card-reveal" style="display: none; transform: translateY(0%);">
    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
    <p>Here is some more information about this product that is only revealed once clicked on.</p>
  </div>
</div>

这是 jsfiddle:http://jsfiddle.net/kavc89nh/17/