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

对于拥有div的{{1}}，请手动将宽度设置为所需的任何值。不设置宽度，默认情况下它将是父级的class="card"。

此外，您必须在100%中包含3个资源，才能使html的所有功能正常工作：

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

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

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

1 个答案: