Php 如何在FancyBox上使所有图像的纵横比为1:1？_Php_Html_Css_Fancybox_Fancybox 3

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

php html css

Php 如何在FancyBox上使所有图像的纵横比为1:1？,php,html,css,fancybox,fancybox-3,Php,Html,Css,Fancybox,Fancybox 3,我对FancyBox v3的缩略图有问题。我希望所有的缩略图在1:1的纵横比。在画廊视图中，所有作品都很好。我如何解决这个问题？我需要更改什么值？有关更多信息，请查看引导版本：5 PHP版本：7.4 FancyBox版本：3 HTML代码 <!DOCTYPE html> <html lang="it"> <head> <title>Annuario | ProLab</title> <me

我对FancyBox v3的缩略图有问题。我希望所有的缩略图在1:1的纵横比。在画廊视图中，所有作品都很好。我如何解决这个问题？我需要更改什么值？有关更多信息，请查看

引导版本：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>

谢谢你的回复

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