How to set image size for Materialize Media Box when opened
I’m just creating a quick webpage for viewing my art inspiration. I’m making all of the images use the Media Box feature of Materialize CSS so I can display them side by side, and click on an image to make it bigger. I have the images sized the way I want them when not clicked. But when clicked, the image opens up to max size. For most of my images, this isn’t a problem. But for a few, max possible size is larger than the image size, which results in it being blurry. Is there any css that affects the images once opened?
My html code:
<img class="materialboxed img-size" data-caption="Map of Exandria" src="./Maps/Exandria.jpg"/> My css code for the non-clicked view:
.img-size { max-height: 300px; margin: 5px; } 
I did something like this, I hope it answers your question.
<html> <head> <link href="Picstudy.css" type="text/css" rel="stylesheet"> <title>Pictures</title> </head> <body> <div class="page"> <div class="pic"><img src="https://i.ibb.co/F3j7wHn/1.jpg" ></div> <div class="pic"><img src="https://i.ibb.co/2qfLZMh/2.jpg"></div> <div class="pic"><img src="https://i.ibb.co/DtpCdGF/3.jpg"></div> <div class="pic"><img src="https://i.ibb.co/VV09ZBq/4.jpg"></div> <div class="pic"><img src="https://i.ibb.co/g4Tj5nL/6.jpg"></div> <div class="pic"><img src="https://i.ibb.co/bQ619ct/7.jpg"></div> </div> </body> </html> .page{ display: grid; grid-template-columns: repeat(3,1fr); } img{ height:100px ; width: 300px; position: static; } img:hover{ height:inherit; width: inherit; } 
