我建立了一个django项目来尝试实现。我遵循了来自实现站点的CDN设置示例，并使用其示例添加了一张水平卡片。我使用的图像是152x152px。出现的页面使图像全屏显示（iMac），并在下面显示文本。我以示例代码为基础，发现有一个容器类，在我可以看到的网站上没有提到它。当我添加该卡片时，卡片图像会填满容器的整个宽度。我为图像类添加了宽度。没有效果。我将class =“ response-img”添加到图像。它也没有作用。除了标准的Django框架，这是我的整个网站：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django Materialize Sandbox</title>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script>
</head>
<body>
<div class="container col s8">
<h1>It's a start</h1>
<div class="col s12 m7">
<h2 class="header">Horizontal Card</h2>
<div class="card horizontal">
<div class="card-image">
<img src="{% static "core/images/anita-black.jpg" %}" alt="kitty" >
</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>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
还有其他我想念的东西吗？有更好的文档吗？除了物化网站，我找不到其他任何东西。
将材料卡从其所在的列中获得宽度。如果您熟悉grid系统，那么这很容易理解：
col s12 =包含元素的100％（完整宽度）
col s6 = 50％
col s4 = 33％
依此类推。
如果您使用文档中相同的标记，如我在此codepen中所做的那样，则您的卡片将达到预期的宽度，而无需在内部图像上设置额外的控件。
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
此代码取自documentation。
[如果遇到问题，可能是由于标记错误。