Forcing images to stay within certain boundaries.
Hi all,
at first sorry for the stupid title
I am wondering what to do with user images, when a user uploads his/her picture. I dislike using gd and stuff, it would make things more complicated than they need to.
So here's the problem:
A user can upload up to 50kb-images. Working with pictures a lot, I know 50k images can be something from tiny to giant posters. So, if a user want's to drop a 10pixel x 10pixel picture in his profile, fine. But what if the picture exceeds the 200x200pixel boundaries of his profile page? In that case it would ruin the layout. So what to do? Setting style to "inherit" will only cut the picture, but isn't there a way to resize it to stay within the 200px limit?
TIA
Patrick
http://www.patrickbaer.com
Professional Photo Retouching Services
matt_w posted this at 03:16 — 22nd November 2005.
He has: 9 posts
Joined: Nov 2005
Patrick,
The best thing to do is to programmatically resize the image... but if you don't want to do that, you can set the size attribute for the width only. IE and Firefox/Mozilla will adjust the height to maintain the aspect ratio and scale the image to match the specified width. (I haven't tested this in other browsers.) The drawback is that smaller images will be made larger, which can look pretty ugly.
Matt
EditMe - Edit your web.
http://www.editme.com
edpudol posted this at 05:39 — 23rd November 2005.
They have: 10 posts
Joined: Nov 2005
I agree with matt_w. you can do this an alternative solution, but as he said it will cause the picture look ugly.
Renegade posted this at 07:57 — 23rd November 2005.
He has: 3,022 posts
Joined: Oct 2002
Well, what you could try and do is set a div that is 200px by 200px and set the image as the background, centred.
If the image doesn't show up right, within the boundaries, then, the user will upload another image for his profile?
Patrick A Baer posted this at 20:49 — 24th November 2005.
He has: 32 posts
Joined: Mar 1999
I found a way, quite easy actually, and wanted to share it with you:
<html><body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" style="margin:0px;" style="background:none;">
<?php
echo <<<EndOfHTML
<a href="$pic" target="new"><img id="pic" src="$pic" onLoad="resize(this);" border="0"></a></body>
<script type="text/javascript"><!--
PicValid = 0;
function resize(PIC) {
PicValid = 1;
tooBig = 0;
height = PIC.height;
width = PIC.width;
if(width > 266) {
width = 266;
tooBig = 1;
PIC.width = 266;
}
parent.document.getElementById(window.name).setAttribute("width",PIC.width);
if(window.opera) {
parent.document.getElementById(window.name).setAttribute("height",PIC.height);
} else {
parent.document.getElementById(window.name).setAttribute("height",PIC.height+3);
}
if(linkStr = parent.document.getElementById(window.name).parentNode.getAttribute("href")) {
document.getElementsByTagName("a")[0].href = linkStr;
} else if(tooBig) {
myDiv = document.createElement("div");
myDiv.style.position = "absolute";
myDiv.style.top = PIC.height-16 + "px";
myDiv.style.left = PIC.width-16 + "px";
myDivLink = myDiv.appendChild(document.createElement("a"));
myDivLink.setAttribute("href",PIC.src);
myDivLink.setAttribute("target","new");
myDivImage = myDivLink.appendChild(document.createElement("img"));
myDivImage.setAttribute("border",0);
myDivImage.setAttribute("src","img/expand.gif");
myDivObj = document.firstChild.childNodes[1].appendChild(myDiv);
PIC.parentNode.removeAttribute("href");
} else {
PIC.parentNode.removeAttribute("href");
}
}
function noPic() {
if(!PicValid) {
document.getElementsByTagName("img")[0].src = "#";
parent.document.getElementById(window.name).setAttribute("height",30);
parent.document.getElementById(window.name).setAttribute("width",30);
}
}
window.setTimeout("noPic()",30000);
// --></script>
</html>
EndOfHTML;
http://www.patrickbaer.com
Professional Photo Retouching Services
john551 posted this at 09:47 — 8th December 2005.
He has: 4 posts
Joined: Sep 2005
It will be better you do it on server side using php or whatever scripting language yr application is in.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.