Site that automatically resizes images based on browser size

Hi. I need to make a site that automatically adjusts the size of the images based on the browser size, but keeps the image quality. Does anyone know how to do this without using flash?
I basically want the site to perform like [http://www.shotview.com/|http://www.shotview.com/] . Thanks for your help.

first time accessing website get screen size info using javascript and then redirect to next page and store screen size info into session. then, when requesting pictures from browser use custom servlet, mapped to image extension, that renders images to different resolution.

Similar Messages

Make a background photo that will resize to the users browser size

I'm trying to create an effect like this in Iweb:
http://neistatbrothers.com/
You'll notice that the background image resizes to the browser size.
I have read threads like that say to edit the HTML from "Scroll" to "Fixed"... that doesn't seem work.
THIS website is NOT what I am looking for.
THIS website is NOT what I am looking for.
Thanks!

Thanks Wydor,
I'm trying to decode this very elegent and cryiptic answer. I am an iweb user after all so I need a few more baby steps. I'm going to try and over-communicate to clarify. This response is long, but I appreciate your help.
The link that you sent me (the way that page looks) is exactly what I am looking for.
So I'm assuming that this is the code I will need :
<script language="JavaScript" type="text/javascript">

</script>
And of course changing the image title and folder.
From iweb I have downloaded my "site" to a local folder where I can edit the HTML files from Dashcode 3.0.1.
The code looks like this for that page which I have titled "Blank", the Image I want to use is titled "SNV33631.jpg" :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Generator" content="iWeb 3.0.4" />
    <meta name="iWeb-Build" content="local-build-20110920" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="viewport" content="width=700" />
    <title>Blank</title>
    <link rel="stylesheet" type="text/css" media="screen,print" href="Blank_files/Blank.css" />
    
    
    <script type="text/javascript" src="Scripts/iWebSite.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
    <script type="text/javascript" src="Blank_files/Blank.js"></script>
</head>
<body style="background: rgb(255, 255, 255) url(Blank_files/SNV33631.jpg) repeat scroll top left; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
    <div style="text-align: center; ">
      <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: transparent; text-align: left; width: 700px; " id="body_content">
        <div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div class="com-apple-iweb-widget-navbar flowDefining" id="widget0" style="margin-left: 35px; margin-top: 0px; opacity: 1.00; position: relative; width: 630px; z-index: 1; ">
            <div id="widget0-navbar" class="navbar">
              <div id="widget0-bg" class="navbar-bg">
                <ul id="widget0-navbar-list" class="navbar-list">
<li></li>
</ul>
</div>
</div>
          </div>
          <script type="text/javascript"><![CDATA[//><!]]></script>
          <div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
        </div>
        <div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div style="height: 1px; width: 630px; height: 1px; left: 35px; position: absolute; top: 3px; width: 630px; z-index: 1; " class="tinyText">
            <div style="position: relative; width: 630px; ">
              <img src="Blank_files/shapeimage_1.jpg" alt="" style="height: 1px; left: 0px; position: absolute; top: 0px; width: 630px; " />
            </div>
          </div>
        </div>
        <div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div style="height: 480px; line-height: 480px; " class="spacer"> </div>
        </div>
        <div style="height: 150px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
        </div>
      </div>
    </div>
</body>
</html>
My question are as follows
1: Where do I paste the code you gave me.
2: do I need to reformat or add modifiers like, "<" or ">" to it because it is Javascript not HTML code.
3: do I paste it in the "Index" file or the "Blank" file.
Thanks

Why is elements better at photomerge than CC- CC does not appear to automatically fill image based on content but elements does when merging a panorama. Also the stitching is visable in CC but almost perfect in elements- why?

I took 6 panorama shots of a scene and used CC to Photomerge them as one. Couldn't see where to automatic blend the edges and there was 'stitch' lines when the images were merged. So i did the same in Elements 11 and it was perfect. Am i doing something wrong in CC or perhaps not doing something at all?
Any help, please?
Dave

Hi - Thanks for taking the time to reply and i appreciate the remarks- if a little harsh- we all have to start somewhere and i am fully aware of the limitations of Elements which is why i decided to add CC to my software. I can only say that if an inferior quality software from Adobe does the job well then CC must also be suited to doing the same which is why i can only think, from your comments, that i have not done something simple- however- following tutorials to get to the end result should have sufficed- it didn't so perhaps i will consider posting the difference between the two applications- and, perhaps suffer a few more 'harsh' comments. The learning curve is quite steep and i am a visual learner, but i'm also not totally incompetent:)
Kind Regards
Dave Munn
Original message----
From : [email protected]
Date : 02/02/2015 - 06:45 (GMTST)
To : [email protected]
Subject : why is elements better at photomerge than CC- CC does not appear to automatically fill image based on content but elements does when merging a panorama. Also the stitching is visable in CC but almost perfect in elements- why?
why is elements better at photomerge than CC- CC does not appear to automatically fill image based on content but elements does when merging a panorama. Also the stitching is visable in CC but almost perfect in elements- why?
created by station_two in Photoshop General Discussion - View the full discussion
First a clarification: you are not addressing Adobe here in these user forums. You are requesting help from volunteers users just like you who give their time free of charge. No one has any obligation to answer your questions.
I'll give it my best shot anyway.
Few folks in this forum are really familiar with Elements, for which there's a dedicated, totally separate forum.
Different engineering teams, also.
From this perspective, it will be difficult to give you a direct answer to your "why?" question.
Personally, I blend very large panorama shots in Photoshop proper since I can't even remember when without any issues whatsoever, up to and including in Photoshop CS6 13.0.6.
Without being at your computer and without looking at your images, I couldn't even begin to speculate what you are doing wrong in Photoshop, which I suspect you are. The least you could show is post examples from your panoramas that have gone wrong.
I can tell you that panorama stitching requires significant overlap between the individual shots, besides common-sdense techniques like a very solid tripod and precision heads.
The only version of Elements I have ever used for any significant time was Elements 6 for Windows, which I bought in 2008 to use on a PC (I've been an avid Mac user for 30 years). I found Elements so limited and so bad that I successfully demanded a refund from Adobe. IU mention this only to emphasize that I can truly only address your question from a Photoshop (proper) and Mac user point of view. I couldn't care less about Elements, but if you have comparison examples of panoramas processed in both applications, by all means post those two.
Generally speaking Photoshop is a professional level application that makes no apologies for its very long and steep learning curve, while Photoshop has many hand-holding features for amateurs and beginners.
Perhaps the bottom line is that you should stick with Elements if you personally manage to get better results there.
If the reply above answers your question, please take a moment to mark this answer as correct by visiting: https://forums.adobe.com/message/7152397#7152397 and clicking ‘Correct’ below the answer
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page:
Please note that the Adobe Forums do not accept email attachments. If you want to embed an image in your message please visit the thread in the forum and click the camera icon: https://forums.adobe.com/message/7152397#7152397
To unsubscribe from this thread, please visit the message page at , click "Following" at the top right, & "Stop Following"
Start a new discussion in Photoshop General Discussion by email or at Adobe Community
For more information about maintaining your forum email notifications please go to https://forums.adobe.com/thread/1516624.

Resizing cflayout based on browser window

How can I base the cflayout on the browser window's visible area? Every time I resize the window my controls are being displayed off screen with no scroll bars to get to them. Ideally I'd like the layout to be dynamic enough to resize gracefully without needing the scroll bars. Thanks

The way I personally do this is to set the entire page into one large Table, with a width of 100%.
If you are already using tables within your code, then you need to be sure you don't have any large width= values set. Also, if your site has fancy graphics, you need to find somewhere on the page to allow some 'stretching' of those graphics.
Here's a quick example of a page that will automatically adjust based on screen size (remember, just because they are viewing at 1280 x 1024 resolution doesn't automatically mean that their browser is maximized.. it could be reduced/resized on their screen to smaller dimensions - this code will fix that)
<table border="0" cellspacing="0" cellpadding="4" width="100%">
<tr><td bgcolor="black"><font color="white"><b>This could be a navigation area<Br>Just putting it here for demonstration</b></font></td>
<td width="100%" bgcolor="silver"><font color="black"><b>This could be the main area, and since it has a width of 100% it will stretch horizontally based on how much actual screen space is available on the viewers browser window</b></font></td>
<td align="right"><font color="navy">This is a right column, and since it is set to 'align=right' it will allow the center column to strech back and forth</font></td></tr></table>
By experimenting with setting the width= attribute on different columns, you can get different results. Just remember to set the main table width at 100%, and be sure t have at least one TD that has a width of 100% and you should be good to go
WHeis

Photo Gallery w/ Images adjusting size based on Browser size.

I'm new to web design but I'm trying to create a photo gallery with images that dynamically size based on the size of the browser window. Similar to this http://pageduke.com/#/Residential/Colonial%20Revival-Nashville1/1. I know th is a flsh site, but is there a way yo do it in HTML in Dreamweaver, maybe using Spry. I don't know Jquery, but is it possible that way.
Thanks

Nancy,
Woo is not a gallery. It's just a slider - a panel widget, which should
be adaptive/responsive by default. The problem is that for years, the
typical jQuery plugin writer simply copies stuff done by others so
someone finally realized you don't have to fix a width and a height if
you know how to write a stub script
Galleries are totally different. To do a responsive gallery is not so
easy and the only ones that come remotely close - using open source
scripts - do require an initial width. They will not scale both up and down.
I gusess it depends on what the original poster wants and/or cares about
in terms of efficiencies and functionality.
[External commercial link removed]
Message was edited by: Sudarshan Thiagarajan. Please refrain from posting external links advertising/ promoting products & services.

Why does Firefox 35.0.1 crash regularly on many sites that use javascript image rotation?

Since the latest update to version 35, many sites that use javascript to manipulate images tend to crash firefox and make either the guilty tab or all of firefox close suddenly. (Firefox on Debian 7 Wheezy Linux, all updates current). I use firefox daily for web development and this regression bug is VERY annoying for my workflow. I understand you cannot take every situation into account. I do not have the time to investigate what has made Firefox less stable. I really hope you can fix this performance problem. If I can do anything concrete to help besides jumping into the code, let me know.

'''[https://addons.mozilla.org/en-US/firefox/addon/flashblock/ Flash block]''' {web link}
Never be annoyed by a Flash animation again! Blocks Flash so it
won't get in your way, but if you want to see it, just click on it
If you have problems with current Shockwave Flash plugin versions then check this:
* see if there are updates for your graphics drive drivers
'''https://support.mozilla.org/kb/upgrade-graphics-drivers-use-hardware-acceleration'''
* disable protected mode in the Flash plugin (Flash 11.3+ on Windows Vista and later)
'''https://forums.adobe.com/message/4468493#TemporaryWorkaround'''
* disable hardware acceleration in the Flash plugin
'''https://forums.adobe.com/thread/891337'''
See also:
* '''http://kb.mozillazine.org/Flash#Troubleshooting'''

How can I show or hide an image based on screen size in CS6?

I have a web site built using Dreamweaver CS6. I used the fluid grid layout to have different views for each of the 3 types - phone, tablet, desktop. It works well, resizes as it should. I would like to be able to show an image in the desktop version but not the mobile version. How could I do that? I can see in the .css file that different size screens can have their own different settings. Is there code I could add that would hide/show and image based on the users viewport on the same page? Let's say I have a div tag named picture. How could I add a parameter to the picture div tag in the style sheet that would hide the image if it was mobile?
thanks,
Marilyn

Insert image into a container div.
Desktop CSS:
#divName {
height: xxxpx
width: xxxpx
Tablet & Mobile CSS:
#divName {display:none}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Why do my resized images print out original size?

i understand how to resize images (somewhat). however, when i print them, they are printing as original size. what do i have to do to correct this? i have searched the web in vain, am just not finding info. everything is about resizing only. i am using picture manager. have also tried with paint and photo gallery or something. no one in this house is very computer saavy, PLEASE HELP!!!

Thankyou for your response! Still in need of help!
          I am making a craft project. I have resized my image exactly how i want it to be to fit my project base. (No standard sizes work). I made the image smaller, to fit exactly on my base (a heart). I saw there were even templates with a heart, but have not figured that out yet. I used the percentage button to resize my image, with the ratio set to keep the dimensions correct. I saved the resized image. Then I opened it and printed it. It was smaller, but still not right, not how I have it on the screen and not the right size. It is too big for my heart and wouldn't work. I know it must be something simple, some little step I am missing. I need to know how to tell the printer the new size. I am using picture manager. I have a HP Photosmart Plus B210 series printer. I have picture manager, paint, hp photo viewer, windows photo viewer, media center, photo gallery. I don't understand why resizing, saving, then opening that file, still did not work. It still printed out (smaller than original but) not the size I needed. I also edited the image and saved it with a new size, and my editing changes.
       This is truly driving me insane! I have spent hours and hours trying to figure it out for myself, as well as searching the web, and asking for help from different forums. (Not to mention wasting lots of ink!??!!!!)
                                                     I Truly would appreciate any help,
                                                                      SINCERELY,
                                                                      lamblovegirl

Mail is automatically resizing images

When attaching an image to mail it is automatically being resized to approx. 160 kb no matter what size the image really is. I can't seem to find any preferences in Mail that apply and Aperture export is set at Original size JPEG. Any clues? Recently upgraded to Leopard and iLife 08'.

Steve:
Are the photos also being resized automatically in dimension? You should be getting an window with the option for picking the size of the image to send, small, medium, large and actual size. Are you getting that window when you select the photo and click on the email button? Also at the bottom of the email window will be a menu button on the lower right with the size options once the photo is in the email.
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
I've created an Automator workflow application (requires Tiger), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. It's compatible with iPhoto 08 libraries and Leopard. iPhoto does not have to be closed to run the application, just idle. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file.

Mobile Safari on iPhone 3GS automatically resizes images to 1280x800

Hi,
I'm a new iPhone user and thus have had no prior experience. However, I've noticed that when you try to open a large image in Safari running on my iPhone 3GS, it appears to automatically shrink the image to 1280x800.
An example:
http://www.macwallpapers.net/images/wallpapers/Homer%20Simpson%20Apple-600960.jp eg
This image is 2560x1600, yet when I open it on Safari on my iPhone, it registers as a 1280x800 image. Note that it is not just this particular server, but every server I've tried.
Is this normal? Has anyone else noticed this? A few Google and forum searches seem to have not turned up anything.
Thanks.

I am slightly skeptical, since it all happened at once, and all the other browser apps seem to work. Plus, at exactly the same time, I started having app downloading issues.
My son, who has exact same phone, bought at exactly the same time, but without ios5 / cloud download has no issues at all.
This phone version is still being sold, so Apple or whatever caused the issue, should support it still.
Any answers on the horizon to fix this?

Blogger (blogspot) mobile site won't resize images

Blogger has supported mobile version webview. When using Firefox android browsing blogger, the images are not resize to smaller ones.
As image below:
http://imgur.com/WWdDFLE
Firefox for android, the image won't resize to smaller one, but other browsers do.

This is likely a problem with the data blogger sends to Firefox. You can log a bug report at https://webcompat.com/ and technical people will do some diagnosis of the issue.

Fireworks CS5 "automatically" resizes images to minuscule dimensions

I am having an odd issue in working with Fireworks PNGs from one of my subject matter experts. We have been using Fireworks since around 2000 so it's nothing new to us and it's been used in tens of thousands of images (we deliver eLearning to 70,000 people per year in 130 countries). We have 10 users and have been using it over a series of Windows machines over the years.
We use CS5 with Flash, Dreamweaver, and Fireworks and typically it all runs very smoothly. But a few months ago I would open one of her PNGs (layered, etc) and whether I made any changes or not when I re-open it it has been resampled to very small dimensions. For example, a 600 by 400 pixel image will display as 16 by 15 pixels.
This would happen with any of her images on several machines at work (*** CS5) and my home machine (CS5.5).
We had IT remove and then reinstall Fireworks CS5 on her machine and all was fine for two months. Now this weird thing is happening again. It must be some local configuration file that is getting altered. I am at my wit's end trying to solve this and the only workaround I have is to open her files in Photoshop which works fine (but is not ideal since only two MMDs have PS and we need to edit callouts done in Fireworks).
To recap - I open one of her images, close it, and reopen it and it resamples to very small and unsuable dimensions.
Has anyone ever seen this odd behavior?
Is there a config file I can delete and let the system rebuild? (I remember some flash issue, years ago, that was fixed like that).
Thanks!

Excellent questions! Thanks for your left-field ideas - this is a left-field issue!
They seem to resize when closed but even if they are simply opened and closed without any changes and thus without actually saving. They do seem to always go down to the same size (not in proportion) and would be too small even as thumbnails (that was a good thought though).
It may be indirectly due to Fireworks and be some combination of the operating system and/or other applications she may have installed such as Snag-It because a full uninstallation and installation of Fireworks takes care of the issue. It has happened twice and here's hoping it does not happen again.
Saving the files as new files does not seem to help - she'll take her screenshots, paste them into Fireworks and then save the file to a remote server. I can open them from the server or take a copy locally, both result in the miniscule image after closing them. But only with her files. We have images from four other SMEs that don't do this "thing".
If it happens again, I will more carefully observe the particulars you asked about.
Thank you for your time and food for thought - I like left-field ideas - that's how we create new things in this world! =)

Video news sites that play ads seem to take browser control

video news sites have an ad play first sometimes I want to exit but the ad seems to take control of the browser and I have to wait until ad ends, even the "X" will not kill the page, when I duplicate steps in safe mode it cancels immediately, how can I kill a page that seems to take control in normal mode

https://support.mozilla.org/en-US/kb/reset-firefox-easily-fix-most-problems <---Reset Firefox
http://support.microsoft.com/kb/318378 <---Repair IE

Why does browser keep refreshing every few seconds. I keep getting kicked of of sites that require log in because my browser refreshes and sends me back to log in page.

I use the same plug-ins i always have, with the exception of faster fox. I got the plug in off of c-net. The first thing I did was disable that plug in. I do remember at one point i used to have a plug in that allowed you to set the refresh intervals. I don't remember which is was though as I got rid of it a long time ago. I have checked every option I can think of to no avail..please help.

If you have an infected system, Firefox will get infected no matter how many times you reset it. Refer to a specialized forum to clear the malware from your system.
* https://forums.malwarebytes.org/index.php?showtopic=9573
If you haven't disabled the malware and phishing protection features, and you have a good and up-to-date anti-virus, then visiting web sites shouldn't be an issue. Installing questionable software on the other hand allows malware to do anything on your system.
* [[Troubleshoot Firefox issues caused by malware|How do I prevent malware from being installed?]]
* [[Security and passwords settings]]

How can I batch resize images to a file size of 1 meg?

I'm not the most technically literate mac user and would gratefully receive any help please.
I have been asked to reduce lots of images of various large file sizes and dimensions to 1 meg. I am using Photoshop CS4 and am aware of the 'Image Processor' function under 'scripts' unfortunately it only allows me to adjust the image dimensions, but I need to reduce the file size so that every image is 1 meg and at 300 dpi, it doesn't matter about the image dimensions.
Thanks so much!
Jess

You omitted to name the file format you want to use.
If you use any compression the task is far less trivial than you might think.
Trying to predict the effect of the compression (even if it were non-destructive) is not always sensible so the viable approach may be to save, check file size, if above intended one change dimensions, save, check file size etc.
I think I have come across thread/s on this in the Scripting Forum but I can’t remember anyone ever posting a finalised Script for this.

Site that automatically resizes images based on browser size

Similar Messages

Maybe you are looking for