Как установить размер изображения для Materialize Media Box при открытии - PullRequest
Новая
       2

Как установить размер изображения для Materialize Media Box при открытии

0 голосов
/ 11 июля 2020

Я просто создаю быструю веб-страницу для просмотра моего вдохновения в искусстве. Я заставляю все изображения использовать функцию Media Box в Materialize CSS, чтобы я мог отображать их рядом, и щелкнул изображение, чтобы увеличить его. У меня есть изображения нужного размера, когда они не нажимаются. Но при нажатии изображение открывается до максимального размера. Для большинства моих изображений это не проблема. Но для некоторых максимально возможный размер больше, чем размер изображения, что приводит к его размытости. Есть ли какой-либо css, который влияет на изображения после открытия?

Мой html код: 

<img class="materialboxed img-size" data-caption="Map of Exandria" src="./Maps/Exandria.jpg"/>

Мой css код для просмотра без щелчка: 

.img-size {
     max-height: 300px;
     margin: 5px;
}

1 Ответ

0 голосов
/ 11 июля 2020

Я сделал что-то подобное, надеюсь, это ответит на ваш вопрос. 

<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;
}
...