CODEWITHSUNDEEP
htmlcssmaterialize
Michel
Michel

Reputation: 23635

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

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)

Upvotes: 0

Views: 453

Answers (2)

michaelT
michaelT

Reputation: 1711

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.

Upvotes: 1

Waqar Akram
Waqar Akram

Reputation: 117

please add

.responsive-img{ width:100%;}

Upvotes: 2

Related Questions