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

Question

I work with the materializecss grid system and I have a s6 col. ( <div class="col s6 center-align">) Now when I put a (large) image in it, I want the image to scale so it will not move out of the column. The image is this:

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

Now on a small screen, the image doesn't respect the column boundaries and fills the entire width of the screen (also it goes out of the container)

Answer 1

You can scale an image using width and height. width: 100%; fits the image's width to the width of its parent. And height: auto; scales the height of the image automatically depending on its current width.

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

Edit: Notice, that if there is padding on your parent element, you have to add box-sizing: border-box; to the parent element.