CODEWITHSUNDEEP
phphtmlcssimage
Aj Saini
Aj Saini

Reputation: 13

html/php random image generator - align image based on screen size

Hi everyone thank you for your time

Please help me fix the html code below i am trying to achieve every time user/browser refreshes the page the image refreshed (random order) at the moment it is working fine. however the image does not get resize automatically to fit the screen, in other words if image is bigger than the screen then i have to scroll down/right to see the image please help me fix this driving me nuts

I have to folder called domain.com/index.php domain.com/images folder which contains all the images

	<!DOCTYPE html>
<html>
<body style="background-color:transparent;">

<style type="text/css">
.myImage
{
  //  margin: auto;
  //  display: block; 
    height: auto;
    width: auto;
  //  padding: 0px;
  //object-fit: contain
  //  overflow-x: auto;
  //   white-space: nowrap;
}
</style>


<?php 
$folder = opendir(images);

$i = 0;
while(false !=($file = readdir($folder))){
if($file != "." && $file != ".."){
    $images[$i]= $file;
    $i++;
    }
}
$random_img=rand(0,count($images)-1);
echo '<img src="images/'.$images[$random_img].'" alt="image" class="myImage" ';
		
			?>
				
</body>
</html>

Upvotes: 0

Views: 1038

Answers (2)

user9189147
user9189147

Reputation: 296

You might try something like this. I tested on my local dev box and appeared OK. Hope this helps. You would have to make a few small tweaks to directory paths, but should work OK. The path to the directory containing the images must be the full path. "glob" is a PHP function that returns an array of the contents of a directory using pattern matching (see http://php.net/manual/en/function.glob.php).

<html>
<head>
    <style type="text/css">
    .myImage
    {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height:100%;
    }
    </style>
</head>
<body style="background-color:transparent;">
    <?php
        // Grab the contents of the directory using a file matching pattern.
        $folder = glob(__DIR__.'/html/ImageFiles/*.jpg');
        if (false === $folder || empty($folder)) {
            // Show some default image.
        } else {
            // Randomize the array.
            shuffle($folder);
            // Grab the first element off the array.
            $random_img = array_pop($folder);
            // In the src= replace the full file path to make absolute path.
            echo '<img src="'.str_replace(__DIR__, '', $random_img).'" alt="image" class="myImage">';
        }
    ?>
</body>
</html>

Upvotes: 1

Vel
Vel

Reputation: 69

First off, you're not closing your tag. You're missing the closing >. I know these things are sometimes easy to miss when you've been working on something for awhile.

It should look like this: 

echo '<img src="images/'.$images[$random_img].'" alt="image" class="myImage">';

You could possibly be able to solve your problem but putting this section of HTML in another div and defining a width for that div so that it is smaller than your screen size.

For example:

echo '<div class="imgbox">';
echo '<img src="images/'.$images[$random_img].'" alt="image" class='myImage'>';
echo '</div>';

and then add CSS for that using either fixed pixels or responsive percentages

.imgbox{
  width: px OR %;
  height: px OR %;
}

EDIT: 

    <!DOCTYPE html>
<html>
<body style="background-color:transparent;">

<style type="text/css">
.myImage{
  //  margin: auto;
  //  display: block; 
    height: auto;
    width: auto;
  //  padding: 0px;
  //object-fit: contain;
  //  overflow-x: auto;
  //   white-space: nowrap;
}

.imgbox{
      width: set px OR % values here;
      height: set px OR % values here;
    }
</style>


<?php 
$folder = opendir(images);

$i = 0;
while(false !=($file = readdir($folder))){
if($file != "." && $file != ".."){
    $images[$i]= $file;
    $i++;
    }
}
$random_img=rand(0,count($images)-1);
echo '<div class="imgbox">';
    echo '<img src="images/'.$images[$random_img].'" alt="image" class="myImage">';
    echo '</div>';

            ?>

</body>
</html>

Upvotes: 1

Related Questions