Materialise Card 使图像全宽答案

【问题标题】：Materialize Card Makes Image Full WidthMaterialise Card 使图像全宽
【发布时间】：2020-02-21 18:08:24
【问题描述】：

我建立了一个独立的网页来尝试实现。我遵循了物化网站上的 CDN 设置示例，并使用他们的示例添加了一张水平卡片。我使用的图像是 150x150 像素。生成的页面使图像成为屏幕的全宽 (iMac) 并显示下面的文本。我查看了示例代码，发现有一个容器类，在我可以看到的网站上没有提及。当我添加它时，卡片图像填满了容器的整个宽度。我在图像类中添加了一个宽度。它没有效果。我将 class="responsive-img" 添加到图像中。它也没有任何效果。这是我的原始代码

<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="row">
      <div class="col s12 m7">
        <h2 class="header">Horizontal Card</h2>
        <div class="card horizontal">
            <div class="card-image">
                <img src="https://via.placeholder.com/150

C/O https://placeholder.com/small_image.png">
        </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>

还有什么我错过的吗？有更好的文档吗？除了物化网站，我找不到任何其他网站。

修复

当我添加@Doughballs 修复时，它仍然没有工作。那时我决定检查我正在使用的 css 的版本。具体化站点最高为 1.0.0。当我更改标题中的两个版本号时，它起作用了。我一定是从另一个网站获得了我的标题。

【问题讨论】：

标签： css materialize

【解决方案1】：

Materialize 卡片的宽度来自它们所在的列。如果您熟悉 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。

如果您遇到问题，很可能是杂散标记造成的。

编辑：

所以我使用文档中的水平示例创建了一个 codepen。你是对的 - 他们在标记中缺少一个行包装器。在任何情况下，所有基于网格的布局系统都使用相同的结构：列存在于行中，行存在于容器中。

我会说水平卡不如标准卡灵活/响应迅速。在某些较窄的尺寸下，横向图像下方可能有空白区域，而在非常宽的尺寸下，纵向图像会使卡片太高而不实用。所以需要一点常识来确保您的图像正确显示。

Horizontal codepen

【讨论】：

我在我的问题中留下了无关的代码。看起来这就是你要解决的问题。我的水平卡有问题。物化视图上的渲染在图像右侧显示文本。我将代码添加到可待因并链接它。测试在卡片下方。我在 Django 之外重新创建了页面。
抱歉，您是说您已经分叉了 Codepen？如果有，请发送链接。
主要问题是我在 CDN 链接中使用的是旧版本。