materializecss：如何让图像留在列中

Question

我使用 materializecss 网格系统，我有一个 s6 列。 ( <div class="col s6 center-align">) 现在，当我将（大）图像放入其中时，我希望图像能够缩放，这样它就不会移出列。图片是这样的：

<img class="responsive-img" src="{{getImageName()}}">

现在在小屏幕上，图像不遵守列边界并填满屏幕的整个宽度（也超出容器范围）

Answer 1

请加

.responsive-img{ width:100%;}

Answer 2

您可以使用 width 和 height 缩放图像。 width: 100%; 使图像的宽度适合其父级的宽度。 height: auto; 根据图像的当前宽度自动缩放图像的高度。

.responsive-img{
    width: 100%;
    height: auto;
}

编辑： 注意，如果你的父元素上有填充，你必须添加 box-sizing: border-box; 到父元素。

materializecss: how can I get an image to stay within the column