jQuery Mobile images auto-resizing
Question
I'm new to this community: I'm trying to use jQuery Mobile to create a simple GUI in Windows Phone style.
I want to create some tiles with images and then I must adjust them to the screen width: I tried to do this with the style rule " style="width: 100%;" " but the border of the image is too heavy.
Here is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiles Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">
<link rel="stylesheet" href="Framework\Theme\Metro.css" />
<link rel="stylesheet" href="Framework\JQM\S-1.3.0.css" />
<script src="Framework\JQ\1.10.1.js"></script>
<script src="Framework\JQM\1.3.0.js"></script>
</head>
<body>
<div data-role="page" id="Menu">
<div data-role="header" id="Menu\Header">
<h1>
Menu
</h1>
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext"></a>
</div>
<div data-role="content" id="Menu\Content" style="padding: 2%">
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" data-role="button" style="background: #FFCC33;"><img src="image.png" style="width: 100%;" /></a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" style="background: #FFCC33; padding: 0px;"><img src="image.png" style="width: 100%;" /></a>
</div>
</div>
</div>
</div>
</body>
But the result is: http://img801.imageshack.us/img801/9474/6aoq.png
How can I fit the image to the screen size? (Something like this; http://img19.imageshack.us/img19/1305/f1y4.png )
1 answers
solution1
1 2013-06-14 21:16:30
I would try using css instead of jquery. You can accomplish what you're looking for with that. For example, you are using two images. You could set each one to a width of about 45% of the screen and add a border all in css. You can even have it dynamically scale based on screen size. It would probably be best to use div containers to organize it but this example should be enough to get you started.
I would try something like this:
<html>
<head>
<style>
<style type="text/css">
#images {
height: yourheightinpx;
}
#images img {
position: absolute;
max-width: 100%;
width: auto\9;
}
</style>
</head>
<body>
<div id="images">
<img src="yoursrc"><img scr="yoursrc">
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.