物化响应图像不适用于卡

Question

我有一张卡片实现：

<div class="row">
    <div class="col s12 m7">
      <div class="card large">
        <div class="card-image">
          <img class="responsive-img" src="img/xv-chars.png">
        </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>
    </div>
  </div>

它引用的图像宽度为1680像素，尽管响应式img类，当我在移动设备上查看时它不会缩小宽度。相反，它以全尺寸显示图像，导致用户向右滚动。

以下是主页面上的屏幕截图和向右滚动的另一个屏幕截图，是否有人知道如何强制图片在卡片中正确显示？

编辑：

我在卡片中添加了大量文字并且更改了内容，现在图片在所有屏幕尺寸中都能正确显示，但现在文字显示随机且不稳定。实际文本长达4个句子。当我将其降低到大约一半时，我就会出现图像问题。

Answer 1

在导航栏中有一个未闭合，通过一切都没有。关闭它，文本和图像完美响应。