php - 全屏显示图像

问题描述

我正在制作一个网页，其中我使用 laravel 显示来自数据库的一些数据。下面的代码

网页视图 - image1

我想做什么 - 我想让 dv 在点击时全屏显示 -图片

页面代码

<div class="container">
    <div class="boxmk">
        @foreach($kk as $jp)
        <div class="screenshots-card">
           <div class="ScreenShots-root">
              <div class="screenshot-card">
                 <div class="screenshot-card-header">
                    
                    <div class="screenshot-card-header-name">{{$jp->appname}}</div>
                 </div>
                 <div class="screenshot-card-image"><img alt="User Screenshot" class="screenshot-card-thumbnail-image" src="{{ URL::to('screenshots/'.$jp->filename) }}"></div>
                 <div class="screenshot-card-footer">
                    <div class="screenshot-card-footer-information-bar">
                       
                       <div class="screenshot-card-footer-information-bar-timer">
                          <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                             <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path>
                          </svg>
                          <span class="screenshot-card-footer-information-bar-timer-time">{{$jp->time}}</span>
                       </div>
                    </div>
                 </div>
              </div>
              

           </div>
        </div>
        @endforeach            
     </div>

css

<link rel="stylesheet" href="https://app.workfolio.io/static/css/main.05c50221.chunk.css">
  <link href="https://app.workfolio.io/static/css/2.be6d2076.chunk.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

标签： phphtmlcsslaravel

php - 全屏显示图像

问题描述

解决方案

推荐阅读