?
Solved

display image but do not resize

Posted on 2011-02-25
11
Medium Priority
?
237 Views
Last Modified: 2012-05-11
many different image sizes  some have alot of width, some have alot of height


want image to be shown as max 100px width and max 100px height

without resizing image
0
Comment
Question by:rgb192
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 16

Accepted Solution

by:
sjklein42 earned 2000 total points
ID: 34982899
<script >
function fixSize(what)
{
	var maxwh = (what.width > what.height) ? what.width : what.height;
	if (maxwh > 100 )
	{
		var scaleby = maxwh / 100;
		what.width /= scaleby;
		what.height /= scaleby;
	}
}
</script>
<img src=myimage.jpg onload="fixSize(this)">

Open in new window

0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 34983068
Do you mean to crop the image to 100x100 ?
0
 
LVL 7

Expert Comment

by:DiscoNova
ID: 34984770
Disregarding the fact that you appear to be contradicting yourself in the question ;) you could try something like this:

<div style="background-image:url(image.png);max-width:100px;max-height:100px"></div>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 5

Expert Comment

by:onemadeye
ID: 34988230
... want image to be shown as max 100px width and max 100px height without resizing image.

How about defining the width and height straight to the <img> tag like this :
<img src="picture.jpg" width="100" height="100" alt="" />

Open in new window

0
 

Author Comment

by:rgb192
ID: 34997930
<div style="background-image:url(image.png);max-width:100px;max-height:100px"></div>

is there a way to do this without a div tag

maybe just use an image tag

because I cant put the div in the correct
0
 
LVL 7

Expert Comment

by:DiscoNova
ID: 34998046
You can set style for <img>-tag also, but I must say that I'm not entirely certain if it will work (if you use <div> with background-image, it essentially "clips" the overflow, with <img> it might be a bit different). However, if you wish to achieve the same as with <div>, you could try something like:

<img src="transparent.png" width="100" height="100" style="background-image:url(image.png);max-width:100px;max-height:100px">

Open in new window


Without understanding exactly what it is you're trying to achieve it's a bit of guesswork.

However, using the max-width/height in style actually does "cropping" (which I think is what you might be trying to achieve). The code provided above works by taking a "dummy" transparent image and showing it as 100x100 pixels and putting the "actual" image into background. But as said, I'm not sure if this is what you're trying to do...
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34998116
If I understand the question right, I believe my Javascript is still the only solution that satisfies all these requirements:

(1) Don't resize images that are already smaller than 100px in their largest dimension

(2) Resize larger images proportionally

(3) Resize based on the largest dimension, so that both width and height are <= 100px.

(3) Don't crop - resize
0
 
LVL 7

Expert Comment

by:DiscoNova
ID: 34998189
As you say "(3) Don't crop - resize" whereas the question stated "without resizing image" ... as far as I can fathom, the only way to limit size of image without resizing it would be to crop it :)

However, I just noticed that we are on PHP-area, so perhaps we should be providing solutions in PHP rather than client-side scripting? However - doing that would also require a bit further understanding of what the original author wants to do; crop or fit the whole image within a 100x100 pixels area (I think he may actually wish to resize the image without distorting it's dimensions - for which your JavaScript solution could quite easily be adapted for use with PHP/GD instead).
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34998270
It seems pretty clear to me.

"without resizing image" means that they do not want to have to mess about with the image files that are already stored on their web server, so the resize has to be done by the client's browser.

The question was probably asked in the PHP zone because they're using PHP to generate the web page, so the answer describes some of the HTML that should be spit out by their PHP program.
0
 
LVL 7

Expert Comment

by:DiscoNova
ID: 34998398
I generally try to avoid assumptions (it's good when they are correct, but if the assumptions are wrong, they may lead one to entirely the wrong track) ... that is why I would like the author to clarify his needs.
0
 

Author Closing Comment

by:rgb192
ID: 35031826
yes you are correct.  I didnt understand the javascript at first.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question