jQuery Mobile Grid с автоматическим изменением размера изображений - PullRequest
Новая
       23

jQuery Mobile Grid с автоматическим изменением размера изображений

10 голосов
/ 22 ноября 2011

У меня есть эта сетка: 

<div class="ui-grid-b">
    <div class="ui-block-a">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
    <div class="ui-block-b">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
    <div class="ui-block-c">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
    <div class="ui-block-a">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
    <div class="ui-block-b">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
    <div class="ui-block-c">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
</div>

Но мои изображения (180X80px) отображают " обрезанное " на экране iPhone (ширина 320px).

Как я могу автоматически изменить их размер?

Ответы [ 2 ]

25 голосов
/ 22 ноября 2011

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

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

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

0 голосов
/ 07 марта 2013

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

Попробуйте это: 

<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="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <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;
   }
...