Learn how to a build a cloud-first strategyRegister Now


Resize Image to frame size

Posted on 2006-05-26
Medium Priority
Last Modified: 2013-12-25
I have a web site dedicated to family pictures.  It uses frames.  One frame on the left that has a list of hyperlinks of different photo categories.  When you click on one of the categories it loads the a html page with a table of thumbnails.  I want the user to be able click on any of the thumbnails in frame2 on the right to display the picture in the size of the frame2 on the right.  Right now if the user clicks on the thumbnail it will display the picture in frame2 in fullsize and you only see abot 1/4 of the picture.  It's too big for the frame.  I DO NOT want to have to physically resize all of my images to a smaller resolution.  I WANT to have the browser resize the picture to fit the frame.  How can I accomplish this?  Does Front Page facilitate anything like this?

Here is my existing HTML:


<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Chrissie &amp; Jefferson</title>
<meta name="Microsoft Theme" content="bars 1011">


<p><b><font size="5">Chrissie &amp; Jefferson's Wedding Ceremony</font></b></p>
<div align="left">
      <table border="1" id="table1" cellspacing="10" style="border-color: #000000" bgcolor="#000000">
                  <td width="204">
                  <a href="images/Bauer/Wedding%20Ceremony/scan0007.jpg">
                  <img border="2" src="images/Bauer/Wedding%20Ceremony/scan0007_small.jpg" xthumbnail-orig-image="images/Bauer/Wedding Ceremony/scan0007.jpg"></a></td>
                  <td><a href="images/Bauer/Wedding%20Ceremony/scan0012.jpg">
                  <img border="2" src="images/Bauer/Wedding%20Ceremony/scan0012_small.jpg" xthumbnail-orig-image="images/Bauer/Wedding Ceremony/scan0012.jpg"></a></td>
                  <td><a href="images/Bauer/Wedding%20Ceremony/scan0028.jpg">
                  <img border="2" src="images/Bauer/Wedding%20Ceremony/scan0028_small.jpg" xthumbnail-orig-image="images/Bauer/Wedding Ceremony/scan0028.jpg"></a></td>

Question by:jbauer22
LVL 10

Accepted Solution

aplimedia earned 1000 total points
ID: 16772201
Hi jbauer22

Theoretically, we could have a Javascript dynamically resize your actual image files depending on their variable sizes, however, I strongly urge you to reconsider.

The fact is that the image is made up of a certain virtual dimesion. It is 'X' pixels by 'y' pixels. Now, we could fource the image to display in 'X-20%' but and that may display the image in your frame, but what you actually will end up with is a very pixelated, distorted and unporffesional looking image. In bytes, it is still the same size, but looks terrible.

trust me, this is not how to do it.

What you need to do, is make 2 versions on the image. One for a thumb nail icon and one the size you want to display it. If you use photoshop, you can create an action which will do this for you in a batch file.

I hope this helps.


Author Comment

ID: 16772259
Trust the experts!  Thanks.

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn how to count occurrences of each item in an array.
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.
Suggested Courses
Course of the Month21 days, 1 hour left to enroll

810 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