CODEWITHSUNDEEP
htmlcssmaterialize
howimetmyself
howimetmyself

Reputation: 33

Materialize - How do I make a long vertical image stop overflowing inside a modal

I have a long vertical image that overflows from a popup modal causing a scroll wheel to appear. I have already tried to use the responsive-imgclass, but that does not stop the image from overflowing. The only way I can get it to stop is by setting a pixel limit, but that causes the image to look distorted and not responsive.

Upvotes: 0

Views: 75

Answers (1)

Co Pham
Co Pham

Reputation: 361

You can set the image style like this:

img {
height: 100%;
max-width: 100%;
object-fit: contain;}

It will now 100% height of its parent, in your case is a modal, and the width is responsive.
Feel free to change it to whatever value you see best.

Upvotes: 1

Related Questions