物化响应图像不适用于卡

时间:2017-09-18 06:03:04

标签: materialize responsive-images

我有一张卡片实现:

<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类,当我在移动设备上查看时它不会缩小宽度。相反,它以全尺寸显示图像,导致用户向右滚动。

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

on the main page

scrolling to the right

编辑:

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

Text jumbled

1 个答案:

答案 0 :(得分:0)

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