时间戳

首页 > 解决方案 > 如何在 FancyBox 上使所有图像的纵横比为 1:1？

php - 如何在 FancyBox 上使所有图像的纵横比为 1:1？

问题描述

我对 FancyBox v3 缩略图有疑问。我想要 1:1 纵横比的所有缩略图图像。在图库视图中，一切正常。我该如何解决这个问题？我需要改变什么价值？查看照片了解更多信息

Bootstrap 版本：5 PHP 版本：7.4 FancyBox 版本：3

HTML 代码

<!DOCTYPE html>
<html lang="it">

<head>
  <title>Annuario | ProLab</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="../../../../css_bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="../../../../css/index_style.css">

  <!-- Fancybox CSS library -->
  <link rel="stylesheet" href="/php/fancybox/jquery.fancybox.css">

  <!-- Stylesheet file -->
  <link rel="stylesheet" href="../../../styleGalleria.css">

  <!-- jQuery library -->
  <script src="../../../js/jquery.min.js"></script>

  <!-- Fancybox JS library -->
  <script src="../../../fancybox/jquery.fancybox.js"></script>




  <!-- Initialize fancybox -->
  <script>
    $("[data-fancybox]").fancybox();
  </script>
</head>

<body>
  
  
    <div class="containerGriglia"  id="screenshot">

      <div class="rowGriglia">
        
        <div class="galleria" id="screenshot">
          <?php

          require '../connessione_liceo_cavalieri.php';

          $query = $db->query("SELECT * FROM 2ASU WHERE status = 1 ");

          if ($query->num_rows > 0) {
            while ($row = $query->fetch_assoc()) {
              $imageThumbURL = 'img/' . $row["file_name"];
              $imageURL = 'img/' . $row["file_name"];
              $nome = '' . $row["nome"];
              $cognome = '' . $row["cognome"];
          ?>

              <a href="<?php echo $imageURL; ?>" data-fancybox="gallery" data-caption="<?php echo $row["title"]; ?>">
                <img src="<?php echo $imageThumbURL; ?>" alt="">
                <?php echo  $nome; ?>
                <?php echo  $cognome; ?>
              </a>

          <?php }
          } ?>
        </div>
      </div>
    </div>
  </div>
  </div>
  <script src="../../../../js_bootstrap/bootstrap.bundle.min.js"></script>

</body>

</html>

CSS 代码

.containerGriglia{
    padding: -20px;
    float: left;
    width: 1000px;
    height: 1000px;


}
.galleria a{
    text-decoration: none;
    padding: 5px;
    float: left;
    width: 20%;

}
.galleria img {
    width:100%;
    height: auto;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;

}

.rowGriglia{
    margin-right: 30px;
    margin-left: 30px;
}

*{
    margin:0;
    padding:0;
}

谢谢大家的回复。

标签： phphtmlcssfancyboxfancybox-3

解决方案

推荐阅读