我只是在创建一个快速网页来查看我的艺术灵感。我正在使用Materialize CSS的Media Box功能制作所有图像，这样我就可以并排显示它们，然后点击一个图像使其更大。当没有点击时，我会按照我想要的方式调整图像的大小。但单击后，图像会打开到最大大小。对于我的大多数图片来说，这不是问题。但对于少数人来说，最大可能大小大于图像大小，这会导致图像模糊。有没有任何css会影响打开后的图像？
我的html代码：
<img class="materialboxed img-size" data-caption="Map of Exandria" src="./Maps/Exandria.jpg"/>
我的非点击视图的css代码：
.img-size {
max-height: 300px;
margin: 5px;
}
我做了这样的事情，我希望它能回答你的问题。
<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;
}