max-width property and PHP

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

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.

Try

Code:

---

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

---

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.

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'>";

---

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.)

Try applying these CSS properties:

Code:

---

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

---

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.

@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

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?

Have a look at this page... might be what you're looking for.

First, try this... :\

PHP Code:

---

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


---

Thanks keyboard. That code also works well in FF (as the previous code without overflow:auto;), but in IE the actual size of the image, 640X960, is still displaying and breaking up the page.

The problem is that the max-width and height properties are not supported in Internet explorer, you can get around It as such:

Code:

---

width:expression(document.body.clientWidth > 240? "240px": "auto" );
height:expression(document.body.clientHeight > 320? '320px": "auto" );

---

Thanks very much Bernie, but unfortunately again it is having no affect in IE.
Is there anything else that can be tried?

Thanks again

You couldtrysomeplain JavaScript

Code:

---

var imageWidth = document.getElementById('yourimageid');
var imageHeight = document.getElementById('yourimageid');
if(imageWidth.width < 240 && imageHeight.height < 320){
var inside = true;
}
else{
var inside = false;
}
if(inside = false){
imageWidth.width = 240 ;
imageHeight.heght = 320;
}

---

Remember to change the id's in the code

KennyP, give this a go....

PHP Code:

---

$ImageDisplay = "<img src='$FileLocation' alt='' style="width:expression( document.body.clientWidth > 239 ? "240px" : "auto" );max-width:240px;height: expression( this.scrollHeight > 319 ? "320px" : "auto" );max-height:320px;" border='0' align='middle'>"; 


---

That is in fact, the CSS I posted, and I somehow doubt the result will change

I know (it's not exactly the same)... I just wanted to check something... (Please still try it)

The only real difference in my view that will have occurred is that he may be putting the CSS rules in the correct place, as he may not have before.

Thanks very much guys or continuing to find a fix. The previous code did work in FF, but these last fixes don't work in either browser. I also upgraded from IE8 to IE9; again no difference.
After all the years of developing IE, why can't they get it right?

One more try -

PHP Code:

---

$ImageDisplay = "<img src='$FileLocation' alt='' style='width:expression( document.body.clientWidth > 239 ? "240px" : "auto" );max-width:240px;height: expression( this.scrollHeight > 319 ? "320px" : "auto" );max-height:320px;' border='0' align='middle'>"; 


---

(there was a small error in the code I posted above)
Works for me in IE9.

Fr further reading to do with theis, try Here

Thanks, but not working in either browser. But if it's working for you I'll try again.

By the way, if it's important, I've been adusting the code to be consistent with the page coding...

Code:

---

$ImageDisplay = "<img src='$FileLocation' alt='' style='width:expression( document.body.clientWidth > 239 ? '240px' : 'auto' );max-width:240px;height: expression( this.scrollHeight > 319 ? '320px' : 'auto' );max-height:320px;' border='0' align='middle'>";

---

Yes, it is important.
Try using this exact code -

PHP Code:

---

$ImageDisplay = "<img src='$FileLocation' alt='' style='width:expression( document.body.clientWidth > 239 ? "240px" : "auto" );max-width:240px;height: expression( this.scrollHeight > 319 ? "320px" : "auto" );max-height:320px;' border='0' align='middle'>"; 


---

And if that doesn't work, try this -

PHP Code:

---

$ImageDisplay = "<img src='$FileLocation' alt='' style='width:expression( document.body.clientWidth > 239 ? 240px : auto );max-width:240px;height: expression( this.scrollHeight > 319 ? 320px : auto );max-height:320px;' border='0' align='middle'>"; 


---

I'm getting the full size 640X960 image with

Code:

---

319 ? '320px' : 'auto' );max-height:320px;' border='0' align='middle'>

---

displaying beneath it, as shown in the image.


EDIT: Still getting the full image in IE with the second code as well, but it is working in FF. Is it still working for you in IE?

Thanks... I'm very grateful for your kindness to find a solution.

What do I have to do on your website to duplicate that picture? (Also, is it on that link that you gave me before?)

When I follow the instructions, it works fine? Where is that image in the attachment you posted? I can't find it...

Attachment 4586

Did you try using the javascript I posted?

Bernie: Yes thanks, I did try the java script. It had no effect.

Keyboard: This is the main link to that section

The soft works as follows:

- Choose one of the four available images by clicking on it.

- On the next page, write whatever you like for test purposes as name etc.

- Then click on Generate Screensaver

Did you change the id's in the script appropriately?

I changed only the double quotation marks to single.

If it helps, attached is the entire include where you code is included.

I meant, in the script, there is a document.getElementById on the image's id, did you change that to the I'd of your image?

Actually, try:

Code:

---

var imageWidth = document.getElementById('yourimageid');
var imageHeight = document.getElementById('yourimageid');
function changeSize(){
if(imageWidth.width < 240 && imageHeight.height < 320){
var inside = true;
}
else{
var inside = false;
}
if(inside = false){
imageWidth.width = 240 ;
imageHeight.heght = 320;
}
}

---

And then in your body tag, change:

Code:

---

<body>

---

To:

Code:

---

<body onload="changeSize()">

---

And also remember to change the part in red to the actuall id of the outputted image.

Where do I integrate it?

Code:

---

$ImageDisplay = $ImageDisplay = "<img src='$FileLocation' alt='' style='width:expression( document.body.clientWidth > 239 ? 240px : auto );max-width:240px;height: expression( this.scrollHeight > 319 ? 320px : auto );max-height:320px;' border='0' align='middle'>"; 
}

---

The following is the display box in which all images appear. There is no particular ID...

Code:

---

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

---

In the head, you want some script tags, ie:

Code:

---

<script type="text/javascript">
</script>

---

And you want to put it between them. Remember to change the id in the script, so if the id of your image is "image" change the red parts that I posted to "image". Also remember to modify the body tag.

also,

Please use the forum's bbcode tags to make it more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] <!-- markup goes here -->.....[/html]
for js/css/other.......[code] code goes here................[/code]

I just had a crazy idea (probably won't work).
If you haven't tried this already, try this -

Code:

---

$ImageDisplay = "<img src='$FileLocation' alt='' style='width:inherit;height:inherit;' border='0' align='middle'>";

---

That win't work, because of the non-escaped double quote in it,.

What double quote?

Nice edit there keyboard, there was a quote in alt, which you then removed.

No. That one didn't work in either browser. The previous code which works in FF is now reloaded.

Maybe we could try hypnosis. We'll tell IE that it is really FF and maybe it will behave like it :)