Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
Hour 5. Building Your First Mobile Site > Attaching an Image
Attaching an Image
Images are usually thought about during the design process and generally thought of as staying at a constant size. In mobile design you need to think about the size of the image, the size of the screen, and the best way to serve the image. We go into detail about these issues in Hour 15, “Responsive Site Layout.” For now we’ll put up an image and add a style element within the head element in our HTML file to allow the image to shrink as needed.
Listing 5.5 shows the addition of a style element within the head element, and the addition of an image inside the content area of our page.
Listing 5.5 The Mobile Site with the Addition of an Image That Will Scale
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>My first mobile site</title>
5: <meta name="viewport" content="width=device-width, initial-scale=1">
6: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
7: <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
8: <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
9: <style>
10: img {max-width:100%;}
11: </style>
12: </head>
13: <body>
14: <div data-role="page">
15: <div data-role="header">
16: <h1>My First Mobile Site</h1>
17: </div>
18: <div data-role="content">
19: <p>Welcome to my first mobile site.</p>
20: <p>Try me on all of your mobile devices! You can use any <strong>valid HTML</strong> on this page</p>
21: <img src="sf_600.jpg" alt="Golden Gate Bridge" />
22: <p style="text-align:center;">Powered by jQuery Mobile</p>
23: </div>
24: <div data-role="footer">
25: <h3>Viva la footer!</h3>
26: </div>
27: </div>
28: </body>
29: </html>
