Using CSS to format a Hyperlink with picture

Hi Guys

Using the following class I limit the size of a picture to 100px square - most pictures are fine at that size - however some get stretched

.Thumbnail {background-color:;width:;height:;border-width:1px;border-color:#555555;border-style:solid;margin:0px;float:right;filter:gray alpha(Opacity=80);width:100px;height:100px;}

Open in new window


Is there a way I can assess the size of the picture and if its less than 100px high or less than 100px wide, use auto as the size ? ie like height:auto

I am not looking for a commercial component that might achieve what I want - I am looking for a way to do it in either CSS, Javascript or ASP.


MTIA

Regards

DWE
LVL 1
dwe0608Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mickey159Commented:
Do you mean:
If the picture is not either 100px in width or height, it will be modified so its proportion remain while not exceeding the width and height requirement?
0
Julian HansenCommented:
First get rid of the broken CSS declarations;
To set the height
.Thumbnail {
    border-width:1px;
    border-color:#555555;
    border-style:solid;
    margin:0px;
    float:right;
    filter:gray alpha(Opacity=80);
     height:100px;
}

Open in new window

0
matija_Commented:
Try with these:

.Thumbnail {
border:1px solid #555555;
margin: 0px;
float: right;
filter: gray alpha(Opacity=80);
width: 100px;
height: auto;
max-height: 100px; /* will use auto height, but not exceed 100px */
}

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

dwe0608Author Commented:
Hi Guys, I will give these answers a try ...Mickey159, you're correct in your understanding

MTIA

Regards

DWE
0
dwe0608Author Commented:
Thanks Matija - great answer - I also applied the same methodology to the width and its seemingly working fine

.Thumbnail
{
    border: 1px solid #555555;
    margin: 2px;
    float: right;
    filter: gray alpha(Opacity=80);
    width: auto;
    height: auto;
    max-height: 100px; /* will use auto height, but not exceed 100px */
    max-width: 100px; /* will use auto width, but not exceed 100px */
   
}
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you ok with the image not being square?  if that is the case, then you should set either the height or the width but not both.  If your layout is designed to have a certain amount of images across, then you would set the width.  The problem now is your layout can look odd.  In this case, I use jquery masonry http://masonry.desandro.com/ which is jquery and css magic.

If your goal is to always end up with a square, one option is to do this client site on the fly http://odyniec.net/projects/imgareaselect/examples.html.  However, I prefer to manage the size of the image on the server first.  This way if a large file is uploaded, I can convert it and do any image processing as needed.   The only non commercial way I know of is using image magick http://www.imagemagick.org/script/index.php.  You can install it on your server free and use it like a command line photoshop to resize, crop, colorize, rotate, effects... I use this with classic asp very easily.   Below takes an image of any size and makes a 200 X 200 square that zooms center.

sourcefolder="c:\inetpub\site\uploadedimages\"
thepic="myimage.jpg"
savefolder_thumb=""c:\inetpub\site\images\thumbs\"

Set Img = Server.CreateObject("ImageMagickObject.MagickImage.1") 

img.Convert "-define", "jpeg:size", "300x300", sourcefolder&thepic,"-thumbnail", "200x200^", "-gravity", "center", "-extent", "200x200" , savefolder_thumb &thepic

Open in new window

0
Julian HansenCommented:
The accepted answer is not correct - it can result in distortion of the image.

You don't need to specify a height if you are forcing the width.

If you want to make it so that the longest side is max 100px all you  need to do specify both max-height and max-width without height and width
.Thumbnail {
    border-width:1px;
    border-color:#555555;
    border-style:solid;
    margin:0px;
    float:right;
    filter:gray alpha(Opacity=80);
     max-height:100px;
     max-width: 100px;
}

Open in new window

Here is a sample illustrating the concept

http://www.marcorpsa.com/ee/t430.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I agree with julianH.  The answer chosen may work for your specific project, but for anybody reading, it can cause distortion and the solution in answer #a39466504 is best.
0
dwe0608Author Commented:
thanks guys for the additional input ... I have implemented julianH answer now as I understand what he has said ... my pictures are not large uploads, I just needed an easy way to limit the display area without stretching or distorting the images ...

I am however going to look at the imagemagick for future implementation.

REgards

DWE
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Sounds good.  One note on imagemagick. It  can do a lot.  However, it is a command line tool and you are basically sending command line instructions via vbscript  to do what you want.  There is a little learning curve and as I figured a few things out that I use most, I am able to use the similar thing over and over.  

Aspjpeg http://www.aspjpeg.com/ is a commercial product.  It is $200 bucks.  However, you can be up and running with it pretty quickly.  I think figuring in your time, the $200 is not so bad for a quicker learning curve.

Another option is using php as a quasi web service.  http://php.net/manual/en/ref.image.php  Unlike classic asp, php has a lot of built in functions for manipulating images.  You could build a one page of php that resizes an image, stores it on the server and sends back a response that is done.  Then use your asp to post to the php page to get the image processing done.  I'm not very well versed in php myself, but there are some very good experts here that can help walk you through.
0
Julian HansenCommented:
You might want to consider reopening this question and re-assigning.

EE is trying to up its profile and having the right solution selected is a key factor.

I don't mind how you split points - just as long as the right solution is selected.
0
dwe0608Author Commented:
Sure, how do I do that ?
0
Julian HansenCommented:
Request attention and ask a mod to reopen the question
0
dwe0608Author Commented:
Thanks greatly guys - I've appreciated the input of all.

Regards

DWE
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.