JQuery Мобильная сетка с авторазмерными изображениями

Ответ 1

Вы можете настроить CSS ваших изображений для автоматического захвата всего горизонтального пространства, доступного на экране:

<style>
.ui-grid-b img {
    width  : 100%;
    height : auto;
}
</style>

Это приведет к тому, что каждое изображение будет полностью заполнять свой родительский элемент (<div class="ui-bar">) горизонтально, сохраняя его соотношение сторон.

Ответ 2

У меня есть нечто похожее, и у меня была такая же проблема. Я исправил его, удалив некоторые div...

Попробуйте следующее:

<div class="ui-grid-b">

    <a href="xxx.htm">
    <img alt="alt..." src="image.jpg" />
    </a>

    <a href="xxx.htm">
    <img alt="alt..." src="image.jpg" />
    </a>

</div>

Это работает в моем случае (протестировано на iPhone Simulator, Iphone 4, Android Emulator)

Заголовок:

    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css'; return false;" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

CSS

   .ui-grid-b img {
       width  : 100%;
       height : auto;
   }