全屏显示图像答案

【问题标题】：Full screen an image全屏显示图像
【发布时间】：2021-12-15 12:56:33
【问题描述】：

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

网页视图 - image1

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

页面代码

<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">

【问题讨论】：

怎么会有人知道你的类名后面的 CSS 是什么？你在使用一些 CSS 框架吗？
你的意思是这样吗？？
stackoverflow.com/questions/47845496/…
@Aless55 我正在使用引导程序
祝你好运？ Stack Overflow 不是发布 TODO 任务的地方。

标签： php html css laravel

【解决方案1】：

如果您使用的是 Bootstrap，则可以轻松使用此类覆盖功能。您可以将 Bootstrap Modals 用于此类实现。有关文档，请参阅 here。当用户点击图片时，您可以启动一个模式，显示所选图片的更大版本。

【讨论】：