How to automatically scale images to screen resolution?

Hello
I need a bit of help automatically scaling my image to the viewers resolution.
I have done so with a table and it works fine:
<table width="100%" border="0">
<tr>
<td align="center" bgcolor="#66CCFF"><h1 style="font-size: 30px; text-align: center;"><em>Table Title</em></h1></td>
</tr>
</table>
But I have no clue how to do so for the image.
When I use normal view the image looks alright, but when I go into mobile view it sticks out of the page while the table has a proper resolution.
How do I fix this?

Don't use tables for layouts. They are completely ill suited to modern web design and in particular, responsive web design.
Use CSS layouts with division widths in %.
Example:
CSS Code:
     body {width: 100%;}
     img { max-width:100%}
HTML Code:
     <img src="http://placehold.it/500x350">
Preview in browser & resize your viewport to see what happens to the image.
Nancy O.

Similar Messages

How to make keynote images full screen?

Question: how to make keynote images full screen? I just noticed. after many successful full screen shows with Keynote 09 5.1.1 that I am no longer seeing the show full screen, at 1280, but only using the center part of my macbook pro 13 inch screen (which will mirror just like that on the projection screen, as far as I know). Did I hit a setting I do not know about to keep the images so small?
Thanks

Keynote > Preferences > Slideshow: Scale slides to fit display

How do I develop for multiple screen resolutions using Adobe Air

Hi,
I'm looking at developing mobile apps using Adobe Air but there's something I'm not quite sure. Sorry if this is a newbie question or has been repeated but I have looked at tutorials, etc but just want to get a general idea on how to prepare the assets. Here are some of my questions:-
1) If I want to develop for the iPhone non-retina and retina resolution, do I actually need to only write the code and layout the graphics in retina(960 x 640) stage size and it will automatically scale down for non-retina resolution?
2) How do I cater for iPhone 5 resolution? Do I actually need to swap say the background images through code by detecting the resolution size it was in? or do I actually just leave the background image longer it exceeds the stage height so when it's iPhone 5 it will show everything?
thanks for the help!

If you are talking about regular Flash work, and not your own code-layout application, then what happens depends on the scale mode of the stage. Typically, when doing code layout the stage is set to no_scale, and you have to do all the hard work yourself, calculating the size of things, and laying them out with ActionScript.
If it's more of a typical Flash graphical scene there are two other scale modes that make life easier for you.
The default scale mode is show_all. With that you will be certain to see all of the content of your original Flash stage, and if the screen is a wider ratio than your stage, the content that is off the sides of the stage will be revealed. See this app I made, that uses that technique:
https://itunes.apple.com/us/app/meet-heckerty-funny-interactive/id514220257?mt=8
It works well enough, I have enough extra background graphics to go out to a 16:9 screen, including iPhone 5. That particular stage is 1024x768, and it will scale all the way from iPad 3 Retina down to iPhone 3gs.
The other scale mode that is useful is no_border. In that mode you are certain to not have any black borders around the stage. It achieves that by cropping into either the left and right, or the top and bottom, of the stage. See these apps I made, that work that way:
https://itunes.apple.com/us/app/milkshake-mayhem/id556962979?mt=8
https://itunes.apple.com/us/app/p.s.-snowflake-yourself/id571384475?mt=8
In both of those cases I have content that is correct for half way between the ratio limits of 16:9 and 4:3 (or 9:16 and 3:4 for the portrait case). When the app runs on your device, some amount of the left and right, or the top and bottom, of the stage is cropped. I have enough background content for that to be ok, and all of the important content is within the middle 14:9 or 9:14 area of the screen. The stage size for the landscape app is 1680xx1080, exactly 14:9. This approach is better than the show_all one, in that the user doesn't feel like they are seeing a lot of blank space, as can be the case when viewing a 4:3 stage on a 16:9 screen.
One last thing, even with either of those techniques the app won't fill the iPhone 5 screen. To get that to work you have to include a splash screen that is 640x1136, and name [email protected]. With that in place iOS knows to make your app use the full width or height of the iPhone 5.

How to find out the current screen resolution/width in webdynpro.

HI,
Can any one please tell me how to get the screen resolution in webdynpro?
Regards
-Sandip

Hi Sandip,
- view size can be set by setting the 'width' of the RootUIElementContainer. By defalut, it will be 100% only. Also, It is always better to use the % coz it does not distort your view with different screen resolutions.
- while creating the iview, you have the property like 'HeightType'. There you can set the value as FIXED, AUTOMATIC & FULL_PAGE. If you wish, you may leave it as it is.
- All you have the properties like 'Fixed Height' etc to set the size values.
Regards
Chander Kararia
# Please close the thread once get the correct answer. Give rewards for answers.
Edited by: Chander Kararia on Feb 20, 2009 9:55 AM

How Adobe viewer scales images?

Hi,
I am putting a JPEG file of lesser resolution than the PDF and is scaling it inside PDF. I have a doubt how the viewer scales the image while rendering? Is it just pixel replication or can we specify inside PDF to use some filters for scaling to get better quality? Can someone please help me regarding this doubt?
Thanks,
Sham

I found the answer myself from the PDF standard. Image interpolation is done if the /Interpolate field in the image XObject is set true. I am quoting from the PDF standard below.
"When the resolution of a source image is significantly lower than that of the output device, each source sample covers many device pixels. As a result, images can appear jaggy or blocky. These visual artifacts can be reduced by applying an image interpolation algorithm during rendering. Instead of painting all pixels covered by a source sample with the same color, image interpolation attempts to produce a smooth transition between adjacent sample values. Image interpolation is enabled by setting the Interpolate entry in the image dictionary to true. It is disabled by default because it may increase the time required to render the image."

Images: Different screen resolutions, howto ...?

As you might know, there are several screen resolutions, used by different devices (iPhone 3G/3GS/4, iPad). You might take a look at: http://stackoverflow.com/questions/2993006/designing-for-varying-mobile-device-resolutions -i-e-iphone-4-iphone-3g An example: If i would like to build a generic app, with optimized images for the iPhone 3G/3GS, 4 and iPad, how can i implement the images within my application with the use of different screen resolutions (dpi). 3G: image_low_res.jpg, 4: image_high_res.jpg etc. Is there a better overview for iOS devices showing the exact resolution (dpi)?

In objectiveC/XCode, you would have two images - one at standard size, and one at double resolution for the retina display. The double-resultion image has a '@2x' suffix just before extension. The OS automaticallt uses the correct image depending on the type of phone (i.e. it uses the @2x image on the iPhone4, and the original image everywhere else).
Of course this doesn't help us in Flash. I don't think Adobe have built this feature in to the packager?
Perhaps a good way to achieve the same results is to have the application detect the phone type on startup/constructor by checking the screen size (Capabilities.screenResolutionX/Y). Then, whenever you need a screen coordinate, distance or an image, you have a custom class (probably static methods) that you ask for this information.
It seems like a lot of work, but if you are really keen on supporting the retina display, this is probably your best bet!
Psuedo code:
// Two images in the library
// spriteA.png
// [email protected]
// All my coordinates are measured in original iPhone coords (320x480)
// I am now asking for a point in the middle of the screen
// If I am on iPhone4, the resulting point will be (320,480)
// If I am on iPhone, the resulting point will be (160,240)
var p : Point = ResHandler.createPoint( 160, 240 );
// Now I grab my bitmap
// If I am on iPhone, the resulting bitmap will be spriteA.png
// If I am on iPhone4, the resulting bitmap will be [email protected]
var b : Bitmap = ResHandler.createBitmap( 'spriteA' );
// Now place the bitmap
b.x = p.x;
b.y = p.y;
addChild( b );
// Now move the bitmap by 100 pixels.
// If I am on iPhone the resulting distance will be 100 pixels
// If I am on iPhone4, the resulting distance will be 200 pixels
var d : Number = ResHandler.getDistance( 100 );
b.x += d;
Hope it helps

Sizing window and image for screen resolution

Applet creates Frame that displays JPG or GIF image. Would like to size Frame, and zoom image, on basis of screen resolution, to avoid necessity to scroll image. How can applet or button or frame access screen resolution numbers? Thanks.

Hi,
Call this method. Pass the Frame as parameter
<pre>
public void centerFrame(Frame frame)
//Center the window
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
Dimension frameSize = frame.getSize();
if (frameSize.height > screenSize.height) {
frameSize.height = screenSize.height;
if (frameSize.width > screenSize.width) {
frameSize.width = screenSize.width;
frame.setLocation((screenSize.width - frameSize.width) / 2, (screenSize.height - frameSize.height) / 2);
frame.setVisible(true);
</pre>
Hope this solves ur problem
Regards,
Harsha
[email protected]

Satellite Pro U400 - How do I get the native screen resolution for external monitor?

I have a samsung syncmaster external screen connected to a Satellite Pro U400.
The screen resolution only goes up to 1280 etc however the samsung minimum is 1440 x 920 (ish I forget).
How do I get the samsung to display the whole enlarged screen to save my eyes from the realativively small internal screen?

Hi
> The screen resolution only goes up to 1280 etc however the Samsung minimum is 1440 x 920 (ish I forget). How do I get the Samsung to display the whole enlarged screen to save my eyes from the realativively small internal
I??ve got a U400 which was equipped with the Intel graphic card and I??ve got an external LCD which I have connected to the U400 using the DVI-to-HDMI cable.
My U400 unit supports the HDMI and the LCD the DVI port.
I have received also the driver disk with my LCD and I have installed the software.
I have also update the Intel driver and used one from the Intel page.
Now I have the access to many different external resolutions and can choose it.

How to get more independent of screen resolution

Read already a number of topics about this in this forum. But I still wonder
how to set up ones Swing components for different screen resolutions. What
I did up to now is checking for the current screenwidth and setting sizes for
each resolution. Worked OK. But nowadays there are so many different
screen sizes, this is getting too complex.
I mean, one has to set the component's size, its location, the fonts used,
possible Icons in the Toolbar, the size of the components internal panels,
the insets, border sizes, and many other things. So, assuming ones window
with all the components looks great in one resolution, the developer still has
to check whether it all looks so great as well in any other thinkable screen
resolution. Even in those which the developer isn't even able to create using
his graphics card.
So, my question is: Is there somewhere a clever tool inside Java which makes
the total layout of components and their sizes inside the user's main window
more independent of the screen resolution?
For instance, it would be great to be able to define the component's size,
location, and so on, using the actual size it should appear on any screen.

You are right. For those using advanced high resolution
monitors, this will be a disadvantage. However, I'm quite
sure, the average user I'm aiming for, still uses rather
standard type of monitors. Of, course, in the (near?)
future, everybody may be using high resolution (same
progress as with our tv-screens). So I may have to include
these screen sizes as well later.
Your presentation made me aware of the great need for
everybody in the graphics business for a solution for this.
Still think, this can be automated in a not too difficult way.
I mean, if I can hard code this in such a way, that nobody
is able to see the difference of the program running on a
different resolution, it must be possible to include an
option in whatever programming language, to create ones
graphics components in a resolution independent way.
At least, I think. May be a good starting point for my next
project.
Thanks anyway for your help an remark. I think you still
deserve your dukes. Here they are.

How to design FXML for all screen resolution

hello
I am designing a page in FXML using scene builder,and I want that my fxml runs good on few screen resolutions,for that there is need for relative positioning but in FXML there is nothing like % and all.
Please do any one have worked on this then help me out.
thanks in advance.

See this blog, it doesn't answer your question, but I hope it helps:
http://blog.randahl.dk/2012/12/javafx-designing-for-multiple-screen.html

How do I force a desired screen resolution?

Frequently my Mac mini (2007 model) stretches a 4:3 image (1280×768) onto a 16:9 screen (1600×900). Is it possible to force the Mac to default to 1600×900 on startup or restart? If so, how?

Yes, I do turn on the display (HP LE2001w) before the Mac mini, but I still have the aspect ratio problem. I don't even see 1600×900 in the Mac mini's display menu. What else can I do?

How to automatically crop images in Image Capture for import into iPhoto?

On my PowerBook G4 / Mac OS X 10.4.2, I'm using the Image Capture 3.0.3 application to capture images coming from scanning photographs with a CanoScan 8400F.
Can I get the Image Capture application to automatically set the crop frame on the overview? Other applications do that, but with Image Capture it seems that after I do the Overview (preview), I have to manually set the crop frame by clicking and dragging, before I can click the Scan button to do the scan?
P.S. It seems that iPhoto does not handle scanning, and you do have to use a different application to scan photos before importing them into iPhoto.
PowerBook G4 Mac OS X (10.4.2)

If you hide the details pane Image Capture will scan immediately to a specified folder. Other way is to open printers and faxing from the system preferences , select the scanning tab of your printer and click Open scanner. It will start scanning immediately without opening Image Capture. To set other software as default you should open Image Capture, select your printer/scanner and click the scanner buttons. It will then let you chose which program should be launched when you scan a document.

How to automate two images in a continual loop

I'm a newbie to Flex and would like to take two images that I have and basically display them in the same spot one after another in a continuous loop (cheap automation?). I looked into different effects like Fade, but am stumped how to do something like this in continuous loop. Most samples show different effects as a result of clicking a button or mousing over an image ... thanks!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
[Bindable]
private var vs:int = 0;
private function init():void
var timer:Timer = new Timer(3000);
timer.addEventListener(TimerEvent.TIMER, onTimerStart);
timer.start();
private function onTimerStart(event:TimerEvent):void
if(vs == 0)
vs = 1;
else
vs = 0;
]]>
</mx:Script>
<mx:ViewStack width="100%" height="100%" selectedIndex="{vs}">
<mx:VBox width="100%" height="100%" showEffect="Fade">
<mx:Image source="1.jpg" />
</mx:VBox>
<mx:VBox width="100%" height="100%" showEffect="Fade">
<mx:Image source="2.jpg" />
</mx:VBox>
</mx:ViewStack>
</mx:Application>
Hope this helps..
BaBo,

How-to automatically center images in the Editor View at opening?

Hello all,
Every time I open a pic in the Editor (using CTRL+I) from a pic in the Organizer, the pic is in a separate window aligned on the left of the Editor workspace.
I have to drag the pic up to the center where I get the blue lines around it so that it occupies the center of the workspace.
It seems to me that this behaviour has started with PE 8, I recall (maybe wrongly) not having this behaviour in PE 7.
Does anybondy know how to configure the whole shemabang so that a pic that is opened occupies the fill Editor workspace and is centered?
Thanks in advance,
Cheers,

PSE8 introduced file browsing in tabs; similar to CS4.
This is progress!

How we can get back the screens resolutions on the secondary display

now i can sent 1280x720 on my secondary display, also there is only like 4 options and in the past we had several differnet options, how i can make it work again

Quick response!
I tried Ctrl + h and there is was! This used to be visible on tool bar, but this is just fine.
Much appreciated.
Julie

How to automatically scale images to screen resolution?

Similar Messages

Maybe you are looking for