| |||||||
| Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics. |
![]() |
| | LinkBack | Thread Tools |
| | #1 (permalink) |
| First Time Poster! | Liquid Width Image Problem In IE, URGENT!!! Hey guys, my website is currently being developed by a programmer and I have a problem that neither I nor him can solve. My website has liquid width, however I would like the images inserted in articles to automatically adjust to the size of the screen regardless of its size. I don't want the images to get larger than their inserted size but I do want it to get smaller as the window size is reduced. My programmer has done this in Firefox, however he said that it is impossible to do in IE, so he left me with the option of not inserting images larger than 420px. I REALLY need someone's help ASAP. Thank you!!!! |
| |
| | #4 (permalink) |
| NamePros Regular | it's not impossivel on IE. if you do it via php it's easy.~ to resise an image to a max of 700 pixels Code: $maxwidth = "700";
$imagehw = GetImageSize($get_dir.$_REQUEST[id]);
$realsize = round(FileSize($get_dir.$_REQUEST[id])/1024);
$imagewidth = $imagehw[0];
$imageheight = $imagehw[1];
$realwidth = $imagewidth;
$realheight= $imageheight;
$imgorig = $imagewidth;
if ($imagewidth > $maxwidth) {
$imageprop=($maxwidth*100)/$imagewidth;
$imagevsize= ($imageheight*$imageprop)/100 ;
$imagewidth=$maxwidth;
$imageheight=ceil($imagevsize);
}
Code: <img alt="" src="pathtoimage/image.jpg" border ="0" width=".$imagewidth." height=".$imageheight." /> http://www.daniweb.com/code/snippet413.html this is more than enough for your programmer to solve your problem.
__________________ Joćo Fernandes Silva Selling : 19P.ORG - ARCADEHITS.ORG - AZIAN.NET - COREFANS.COM - CTUTORIALS.NET - DEDISEEK.COM - HITCHECK.COM - HOST15.COM - HOSTCUSTOMER.COM - LARGETIPS.COM - SCRIPTCANDY.COM - VISUALBOOK.NET - VOXVPS.COM / .NET - WALLPAPERSARENA.COM |
| |
| | #5 (permalink) |
| New Member | While the PHP solution would work when the page is first loaded, it wouldn't work if the page is resized after loading. The reason it can work in Firefox (and other W3C compliant browsers) is that they support the CSS attributes max-width, max-height, IE does not. I have done it with a bit of JavaScript... Insert in <head>, modifying where it says to set maximum dimensions Code: <script type="text/javascript">
var actW, actH, maxW = {}, maxH = {};
//SET THE MAXIMUM DIMENSIONS HERE
//use the ID of the element as the index
maxW['test'] = 400;
maxH['test'] = 400;
function initDimensions() {
actW = {}; actH = {};
for (var cID in maxW) {
var cElem = document.getElementById(cID);
actW[cID] = cElem.style.width;
actH[cID] = cElem.style.height;
}
enforceDimensions();
}
function enforceDimensions() {
for (var cID in maxW) {
var cElem = document.getElementById(cID);
cElem.style.width = actW[cID];
cElem.style.height = actH[cID];
if (cElem.width > maxW[cID]) cElem.style.width = maxW[cID];
if (cElem.height > maxH[cID]) cElem.style.height = maxH[cID];
}
}
</script>
Code: <body onload="initDimensions();" onresize="enforceDimensions();"> Code: <img id="test" src="test.jpg" style="width: 75%; height: 75%;" /> You may want to optimize it so that it only uses it when the browser doesn't support the max-width and max-height, and define those in your style instead. |
| |
![]() |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| |