Fancybox-3 streches thumbnails to the width of the page. How...

I have set up fancybox 3 for my photography portfolio, and it stretches the image to the width as seen in the image.

My problematic page.

There are 4 images on this page, 2 vertical ones that have been stretched and two landscape ones that are fine.

<?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; ?>" alt="" width="300"/>
</a>
<?php } 
} ?>

That is the code I have. The slideshow aspect works fine. I didn’t do the method of using 2 files, large and small because I am uploading with PHP to a MySQL server and I don’t know how to copy and resize images.

Source link