Dynamically set width and height of image with PHP and the such

Question

So - I have this website (Pickture) which allows users to upload a photo of virtually any size. This causes a headache when it comes to displaying them.

Currently this happens. The Image is inside a container DIV (which I would prefer to be untouched), and is set to a width of 100% and the height is left blank. This means that all images, even if only 200x200, will be scaled to be around 600x600.

What I would like to happen is this. If the width of the image is greater than 650px, set the width to 100%. If the width is less than that, set the width of the image to be the width of the image (actual size).

I was thinking I could probably do this with a combination of jQuery and PHP - PHP to get the dimensions of the image, and jQuery to set the display dimensions based on some variables put in with PHP - eg:

<script type="text/javascript">
     var imageWidth = <?php echo 'something';?>
     if (imageWidth > 650) {
          $('#image').css('width', '100%');
     } else {
          $('#image').css('width', '<?php echo 'something';?>');
     }
</script>

Thanks to anyone who can help me solve this conundrum.

You might find this useful: http://stackoverflow.com/questions/7553247/php-image-resizing/7553540#7553540 — Herbert, Nov 15 '11 at 19:45
@Herbert he's trying to resize the image in the browser, not manipulate the image itself with PHP. — Madara's Ghost, Nov 15 '11 at 20:02
@Truth: Granted it's not a direct answer to the OP's question (that's why it's a comment). It's just an alternative way of looking at the problem. I wasn't implying that it was a dup. — Herbert, Nov 15 '11 at 20:06

score 2 · Answer 1 · answered Nov 15 '11 at 19:32

2

I'd instead use the CSS max-width property.

You will also have to set display: block.

Of course, there is a catch with this method, and that is that you are sending possibly huge images to the browser. For that, you can resize them dynamically with PHP using imagecopyresampled().

answered Nov 15 '11 at 19:32

Brad

159,648
54
349
530

That's not really what I was asking for - as the max width will also have to be set dynamically through PHP - a headache integrating PHP into CSS. – Alfo Nov 15 '11 at 19:58

score 2 · Accepted Answer · answered Nov 15 '11 at 19:46

I think your idea should work fine. Here's an example, it does work for me. (I've set style to image div so it'll be visible. If you want to resize the image itself, instead of div, it works the same.

<?php
$image_path = "yourpath/yourimage";

list($width, $height, $type, $attr)= getimagesize($image_path); 
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>zzz</title>

<script type="text/javascript" src="pathtojquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var imageWidth = <?=$width?>;
 if (imageWidth > 650) {
      $('#image').css('width', '100%');
 } else {
      $('#image').css('width', '<?=$width?>');
 }
});
</script>

</head>
<body>
<div id='image' style='background-color: #ececec; border: 2px dotted #000000;'>
<img src='<?=$image_path?>'>
</div>

</body>
</html>

score 0 · Answer 3 · edited Nov 15 '11 at 20:37

0

Definitely you can do what you, wrote in your question, but just make the following change:

Append "px" to the width of the image when you are setting the css width, in the else block.

and of course this should be inside $(document).ready(function(){ ... });

edited Nov 15 '11 at 20:37

Nightfirecat

11,432
6
35
51

answered Nov 15 '11 at 19:47

Nahian Khondoker

367
1
6

score 0 · Answer 4 · answered Nov 15 '11 at 19:50

0

Try using a library such as SLIR: http://shiftingpixel.com/2008/03/03/smart-image-resizer/

It will allow you to dynamically resize images at ease, with mod_rewrite

answered Nov 15 '11 at 19:50

Reza S

9,480
3
54
84

Dynamically set width and height of image with PHP and the such

4 Answers4