max-width property and PHP

**KennyP** · 08-12-2012, 07:44 PM

Hi guys,

Would you please show me how to apply the max-width property (or whatever is necessary) to the following code, so that the display of all size images will be limited to fit within a box 240X320, but still remain proportional to their actual size?

Code:

<div style=" padding-top:<?php echo($DownFromTop); ?>px;"><?php echo($ImageDisplay); ?></div>

The code is for the following page of a site I work on... Promotional cell-phone screensaver

When a large image like 640X960 (for the iPhone) is generated, its display on the following page must be made to fit within the 240X320 display box, but everything I've tried hasn't worked.

Thanks,

Kenny

**KennyP** · 08-13-2012, 12:13 AM

The image imprint software has an include in which I was able to set the display size of the images...

Code:

$ImageDisplay = $ImageDisplay = "<img src='$FileLocation' alt='' width='240' height='320' border='0' align='middle'>";

This would work except that images of different proportions display distorted.

**keyboard** · 08-13-2012, 12:18 AM

Try

Code:

$ImageDisplay = "<img src='$FileLocation' alt='' max-width='240' max-height='320' border='0' align='middle'>";

**KennyP** · 08-13-2012, 12:50 AM

Thanks very much for your reply keyboard. Unfortunately, max-width and max-height have no affect on the display. I entered the code as follows..

Code:

$ImageDisplay = "<img src='$FileLocation' alt='' max-width='240' max-height='320' border='0' align='middle'>";

After generating a 640X960 iPhone screensaver it displays its actual size and breaks up the page.

**keyboard** · 08-13-2012, 01:05 AM

This should work in all browsers except IE6 or less

Code:

$ImageDisplay = "<img src='$FileLocation' alt='' style="max-width:240px;max-height:320px;" border='0' align='middle'>";

**traq** · 08-13-2012, 01:10 AM

The only thing that I would add to that is that this really has nothing to do with PHP specifically: it is a CSS issue.
(You just happen to be using PHP to write your CSS.)

**bernie1227** · 08-13-2012, 01:11 AM

Try applying these CSS properties:

Code:

height: auto;
max-height: 320px;
width: auto;
max-width: 240;

**KennyP** · 08-13-2012, 01:17 AM

Thanks again keyboard 1333.

The code still has no affect on the display. However, for whatever it means, if I chage it either to

Code:

style='width:240px;max-height:320px;'

or

Code:

style='max-width:240px;height:320px;'

it does affect the display. But of course, this way it can work for only some of the smaller image sizes.

**keyboard** · 08-13-2012, 01:23 AM

@KennyP -
I tested the code that I gave you and it worked fine...
What browser are you using?
Do you have a link to your site with that code so we can see if something else is impacting it?
Keyboard1333

**KennyP** · 08-13-2012, 01:27 AM

Thanks to you also bernie1227. Like keyboard's code, your code affects the display only if one of the dimensions is set to width or height. Including max- on both for some reason makes them ineffectual.

This is the page.

Thank you bernie and keyboard for taking the time to check

EDIT: I'm trying with IE8 and FF

OK, the problem is only in IE, it is working in FF. Thank you so much! Can it be fixed to also work as well in IE?