我有一张卡片实现:
<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个句子。当我将其降低到大约一半时,我就会出现图像问题。
答案 0 :(得分:0)
在导航栏中有一个未闭合,通过一切都没有。关闭它,文本和图像完美响应。