PDA

View Full Version : 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?


<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 (http://www.billyjoeconor.com/promotion/cell-savers/generate2.php?which=bootsdancingtext)

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


$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


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


$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


$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:


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
style='width:240px;max-height:320px;' or
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. (http://www.billyjoeconor.com/promotion/cell-savers/generate2.php?which=bootstext)

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?

keyboard
08-13-2012, 02:14 AM
Have a look at this (http://stackoverflow.com/questions/7707/ie8-overflowauto-with-max-height) page... might be what you're looking for.

First, try this... :\


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

KennyP
08-13-2012, 03:07 AM
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.

bernie1227
08-13-2012, 03:31 AM
The problem is that the max-width and height properties are not supported in Internet explorer, you can get around It as such:


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

KennyP
08-13-2012, 04:00 AM
Thanks very much Bernie, but unfortunately again it is having no affect in IE.
Is there anything else that can be tried?

Thanks again

bernie1227
08-13-2012, 04:29 AM
You couldtrysomeplain JavaScript

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

keyboard
08-13-2012, 05:02 AM
KennyP, give this a go....



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

bernie1227
08-13-2012, 05:26 AM
That is in fact, the CSS I posted, and I somehow doubt the result will change

keyboard
08-13-2012, 06:03 AM
I know (it's not exactly the same)... I just wanted to check something... (Please still try it)

bernie1227
08-13-2012, 06:34 AM
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.

KennyP
08-13-2012, 06:38 AM
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?

keyboard
08-13-2012, 06:46 AM
One more try -



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

bernie1227
08-13-2012, 06:57 AM
Fr further reading to do with theis, try Here (http://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/)

KennyP
08-13-2012, 07:13 AM
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...


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

keyboard
08-13-2012, 07:21 AM
Yes, it is important.
Try using this exact 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 -


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

KennyP
08-13-2012, 07:23 AM
I'm getting the full size 640X960 image with
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.

keyboard
08-13-2012, 07:43 AM
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...

4586

bernie1227
08-13-2012, 07:49 AM
Did you try using the javascript I posted?

KennyP
08-13-2012, 07:57 AM
Bernie: Yes thanks, I did try the java script. It had no effect.

Keyboard: This is the main link to that section (http://www.billyjoeconor.com/promotion/cell-savers/select.php)

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

bernie1227
08-13-2012, 07:59 AM
Did you change the id's in the script appropriately?

KennyP
08-13-2012, 08:03 AM
I changed only the double quotation marks to single.

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

bernie1227
08-13-2012, 08:05 AM
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?

bernie1227
08-13-2012, 08:08 AM
Actually, try:


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:


<body>

To:


<body onload="changeSize()">

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

KennyP
08-13-2012, 08:12 AM
Where do I integrate it?


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


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

bernie1227
08-13-2012, 08:19 AM
In the head, you want some script tags, ie:


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

bernie1227
08-13-2012, 08:23 AM
also,
Please use the forum's bbcode tags to make it more readable:

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

keyboard
08-13-2012, 08:47 AM
I just had a crazy idea (probably won't work).
If you haven't tried this already, try this -


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

bernie1227
08-13-2012, 08:50 AM
That win't work, because of the non-escaped double quote in it,.

keyboard
08-13-2012, 08:56 AM
What double quote?

bernie1227
08-13-2012, 09:05 AM
Nice edit there keyboard, there was a quote in alt, which you then removed.

KennyP
08-13-2012, 09:08 AM
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 :)

keyboard
08-13-2012, 09:09 AM
Oh... when? (I must've done that before I saw your post...) (I didn't go and specifically change it because of your post).

Edit -
That is weird...

When I view your site, I get the same problem. But when I do a test using the same image it works fine :confused:

bernie1227
08-13-2012, 09:13 AM
No. That one didn't work in either browser.

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

I think that Is everyone's dreams.
Try checking out these links, they may help you:
http://www.svendtofte.com/code/max_width_in_ie/
http://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
http://phydeaux3.blogspot.com.au/2006/01/max-width-and-faking-it-for-ie.html
http://reference.sitepoint.com/css/max-width

KennyP
08-14-2012, 06:55 AM
Hello keyboard1333 & bernie1227 --

Many thanks to you for your kindness and generosity of time. After I saw the problem solved for Firefox, I thought a solution would soon come for IE as well. Sure enough, with the information I got at one of the sites you provided I was able to form the complete solution.

The code below, used without reference to width, works in IE as well as in Firefox to contain the display of larger size images within the space of 240X320, and in perfect ratio with the original images. The width automatically and proportionally adjusts. If a similar expression to width is used, the images fill the entire 240X320 disregarding the original image ratio.

Furthermore, if you download the image by clicking on it, you download the original larger size, which is exactly what I wanted.

Thanks again for your kindness,

Kenny

The working code...

$ImageDisplay = "<img src='$FileLocation' alt='' style='max-height:320px;height:expression(this.height>320?320:true);' border='0' align='middle'>";
}

bernie1227
08-14-2012, 06:58 AM
Remember to set the thread to resolved, by editing the post, going to advanced options and changing the prefix to resolved.