[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Scaling images to fit dynamically resized cells in VB.NET or Javascript

Posted on 2009-02-24
8
Medium Priority
?
687 Views
Last Modified: 2012-06-27
Hi. I am working on a site where I have 2 images spanning the width of the content area of my site.

I have just converted my site from 800px wide fixed width site, to a dynamic width site (ie: fits the user's preferred width).

When I scaled the site larger, the tiny thumbnails in some cases are huge and therefore of horrible quality. So I want to take the full images (2), and rescale them to fit the new cell widths. Each of my images cell width are width="50%".

So this is what I need (in VB.NET or Javascript)

1. Code to get an image to manipulate from my drive
      - can I use Dim Img as System.Drawing.Image = System.Drawing.Image.FromFIle(Filename) ?

2. Code to determine the width of the cell in question, in pixels

3. Code to resize an image - I have some code posted below which I already use on upload, not sure if it is relevant here.


Thanks ! Peter
Here's how I grab my images from my drive today:
 
        MyImagePath = "~/Userdata/L-" & Session("Leaguenum") & "/Albums/A"
        ' Do the images
        cmd.CommandText = "select convert(varchar,albumnum) + '/' + picturefilename + '-t' + picturetype from pictures where picturenum > " & MyRowCount1 & " order by picturenum asc"
        Image2.ImageUrl = MyImagePath & Trim(cmd.ExecuteScalar())
        cmd.CommandText = "select convert(varchar,albumnum) + '/' + picturefilename + '-t' + picturetype from pictures where picturenum > " & MyRowCount2 & " order by picturenum asc"
        Image3.ImageUrl = MyImagePath & Trim(cmd.ExecuteScalar())
 
Here is some code I already have for rescaling images:
 
                ' work out the width/height for the thumbnail. Preserve aspect ratio and honour max width/height
                ' Note: if the original is smaller than the thumbnail size it will be scaled up
                If (originalimg.Width / Lx) > (originalimg.Width / Ly) Then
                    L2 = originalimg.Width
                    newWidth = Lx
                    newHeight = originalimg.Height * (Lx / L2)
                    If newHeight > Ly Then
                        newWidth = newWidth * (Ly / newHeight)
                        newHeight = Ly
                    End If
                Else
                    L2 = originalimg.Height
                    newHeight = Ly
                    newWidth = originalimg.Width * (Ly / L2)
                    If newWidth > Lx Then
                        newHeight = newHeight * (Lx / newWidth)
                        newWidth = Lx
                    End If
                End If

Open in new window

0
Comment
Question by:pbissegger
  • 4
  • 4
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23721551
the images can ALSO have width="50%"
0
 

Author Comment

by:pbissegger
ID: 23728169
But when you make the image width="50%", is that
a) 50% of their original size, or
b) is that scaling them to fit a window whose width is 50% of the browser window ?

I thought it was (a) ... and I need (b) ....
0
 

Author Comment

by:pbissegger
ID: 23729815
Sorry, a point of clarification....

Yes, you are correct - the good browsers (ex: Google Chrome, Firefox, Safari) all work properly an scale (up or down) images to fit the proper space.

The crappy browser (ie: Internet Explorer), which is unfortunately used by 45% of all users, does not treat it properly at all - it scales the images to 100% of their original size.

Can we do anything with ie ?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 23731294
Try this.
Works in IE7

<div style="width:200px; text-align:center"><img style="width:50%" src="http://www.unm.edu/~abqtom/images/Moon/Moon11-19-02b.jpg" /></div>
0
 

Author Closing Comment

by:pbissegger
ID: 31550540
Excellent ! The solution was easy and works with all browsers.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23742192
This should scale with the window
<div style="width:80%; text-align:center"><img style="width:50%" src="http://www.unm.edu/~abqtom/images/Moon/Moon11-19-02b.jpg" /></div>

Open in new window

0
 

Author Comment

by:pbissegger
ID: 23750913
Good point, forgot to attached the final code which is attached.

(Slightly changed as I am inserting a transparent image between my 2 images (2% of width), and now scaling each image as 49% of width.)
<div style="width:100%; text-align:center">
    <asp:Image ID="image2" runat="server" style="width: 49%; vertical-align: top" /><asp:Image ID="image4" runat="server" style="width:2%" /><asp:Image ID="image3" runat="server" style="width:49%; vertical-align: top" />
</div>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23753505
It should be possible to float the right image right and drop the spacer
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month18 days, 13 hours left to enroll

834 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