缩略图正在拉伸以匹配 fancybox 上的宽度 (100%)

Posted 2023-05-09

【中文标题】缩略图正在拉伸以匹配 fancybox 上的宽度 (100%)

【英文标题】：Thumbnails are stretching to match the width (100%) on fancybox

【发布时间】：2020-10-01 08:21:17

【问题描述】：

我查看了文档以查看是否有更改缩略图大小的属性，但看不到任何内容。这是我的网站目前的样子：。我没有为缩略图使用单独的图像，并且不希望这样做。这是我的代码。

<?php 
// Include database configuration file  
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
// Retrieve images from the database 
$query = $DB->query("SELECT * FROM images ORDER BY uploaded_date DESC"); 
    if(!$query) 
        trigger_error("Invalid query: " . $DB->error);
    
if($query->num_rows > 0) 
    while($row = $query->fetch_assoc()) 
        $imageURL = '../phpgallery/'.$row["path"]; 
?>
    <a href="<?php echo $imageURL; ?>" data-fancybox="gallery" data-caption="<?php echo $row["title"]; ?>">
    <img src="<?php echo $imageURL; ?>"  />
</a>
<?php  
 ?>

fancybox 其他方面的工作，比如放大照片和左右点击。 （滚动图像并防止复制和粘贴不起作用）。

被拉伸的两张图片是垂直图片。

【问题讨论】：

有什么问题？

@Pipetus 如何停止图像拉伸？

【参考方案1】：

PHP：

getimagesize ( string $filename [, array &$imageinfo ] ) : array

https://www.php.net/manual/de/function.getimagesize.php

或

CSS：

background-size: auto|length|cover|contain|initial|inherit;

https://www.w3schools.com/cs-s-ref/css3_pr_background-size.asp

【讨论】：

这不能回答我的问题。我想停止在花式框中拉伸图像@ChrisG CSS 不会改变花式框的属性。

问题是你到底需要什么。我用 CSS 管理它.. 如果你需要你使用的图像的大小getimagesize 并在代码中打印它。

图片还有一个width 属性。这通常是通过其他方式处理的，我认为这就是@ChrisG 当他问“你需要做什么”时所建议的，即“你需要在哪里定义图像尺寸”

width 他可以使用getimagesize 来获取图像尺寸。它非常简单。