rgb192
asked on
display image but do not resize
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
want image to be shown as max 100px width and max 100px height
without resizing image
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Do you mean to crop the image to 100x100 ?
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>
... 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 :
How about defining the width and height straight to the <img> tag like this :
<img src="picture.jpg" width="100" height="100" alt="" />
ASKER
<div style="background-image:ur l(image.pn g);max-wid th:100px;m ax-height: 100px"></d iv>
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
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
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:
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...
<img src="transparent.png" width="100" height="100" style="background-image:url(image.png);max-width:100px;max-height:100px">
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...
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
(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
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).
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).
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.
"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.
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.
ASKER
yes you are correct. I didnt understand the javascript at first.