Using imges in creating content for smart phones

 I had a pdf document which I converted to a html document and tried to view it in the browser of a smart phone and really the images did not quite fit in. I decided to use ideas of responsive design to make the images appear in the smart phones to display correctly.

Creating web pages with embedded images poses the problem of how the images would appear when the browser is resized, or if the web page is accessed in a device with smaller format. These days smart phone cameras can capture photos with very high resolutions. If you embed as is in web pages then you will not be able to display the images on a browser with a smaller size. The answer to this is to use the responsive image tags.

Here is an example: Create a HTML page as shown embedding this image.

Diamondhead.jpg (5344x3008, 3.6 MB)

 
Although you see this image as small. It is really large and would occupy the full width and height of a lap top with 1600x900.


<!DOCTYPE html>
<html>
<head>
</head>
<title>Very large image</title>
<body>
<img src="Diamondhead.jpg" width="5344" height="3008">
</body>
</html>

Provide a name for it (XtraLargeImage.html) and save it to the wwwroot directory of your default web site in IIS Manager. When you bring it up in the edge browser (herein, 1600x900), you can see barely parts of this image. Now if modify the XtraLargeImage.html) as shown below and save it to the wwwroot directory as before:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }                           
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }                                    
@viewport { user-zoom: fixed ; }
</style>
</head>
<title>Very large image</title>
<body>
<img src="Diamondhead.jpg" width=100% height=auto>
</body>
</html>
Now if you bring up the image in a browser (Microsoft Edge or Firefox, or any other modern browser) you can resize the image or open the web page on a device with smaller dimensions.

 
file size: 144 KB 

 
file size: 54 KB 
The reason the images look same in this post is because the blogger is also responsive! One clue when you use responsive tags is that the displayed image in the browser will not have the horizontal scroll-bar.

Comments

Post a Comment

Popular posts from this blog

Event Code: UI design with XAML in Visual Studio 2017 - 2

Image
I assume you have followed me with this post here: http://hodentekhelp.blogspot.com/2017/12/how-do-i-configure-button-in-xaml.html After reading the above you will see that you start with an empty project whose code is shown here: WinPhoneStep1 In the final step you will have achieved this: WinPhoneStep11 This project when deployed will just show a button as in the above and nothing more: WinPhoneStep13 Writing code for a click event of this button. Let us first give a name for this button, like ClickMe . When you highlight the button in the design by clicking it, the Property pane opens where you can write the name you want as shown. winPhoneStep20 In the XAML code the Button gets a qualifier x:Name="ClickMe" as shown here: Now enter the Click event to the code by just enter "cl" after a space as shown and the intellisense kicks-in showing your options as shown. winPhoneStep22.png You pi
Read more

Deploying a Universal Windows Project to Lumia 950

Image
We will be using the Lumia 950 as the connected device and it has been set to Developer Mode as described earlier. We start with the HelloWorld Universal Windows Project(UWP) that has been tested to run without errors on the Local Machine as described here. Open the project in Visual Studio 2017 as shown. LumiaDeploy_0 and LumiaDeploy_7 Build (Using Menu Build and its context menu) the Project and verify it is successful. -------- 1>------ Build started: Project: HelloWorld, Configuration: Debug x86 ------ 1>  HelloWorld -> C:\Users\Owner\source\repos\HelloWorld\HelloWorld\bin\x86\Debug\HelloWorld.exe ========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ===== ------------------ Click Local Machine along Debug as shown. LumiaDeploy_1 Pick Device from the list, the display changes as shown. LumiaDeploy_2 Connect your Windows 10 Mobile(Lumia 950) to one of the USB ports. This will result in an
Read more

UWP: Displaying formatted text in a TextBox Control

Image
The entry you make in a text box control is of data type text and sometimes you need to format it as a currency with thousands separator while displaying. Also, if the number of decimal places you enter is more than 2, you need to round it up to 2 in the output. How do you code this in a UWP app? Create a UWP page starting from a Blank UWP project with three controls as shown. There are two text boxes and a button. You enter a number in the top textbox (txt1) and click the button, the formatted currency will be displayed in the bottom textbox(txt2). The app displays as shown. Now provide for a click event for the button and insert code as shown: Convert_1 The string entered in txt1 is converted to data-type double, it is then 'rounded'. The rounded number is then formatted to show the currency symbol and the 1000's place delimiter you find, for example in Excel formatting. Here is the app after entering a number and c
Read more