Блог

Вот JsFiddle.

HTML :

 <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1">
<div data-role="page" >
    <div id="contentwrap">
        <div id="content" data-role="content">
             <img width="300" src="http://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png" />

          asdad asd asd asd   sadadada ad sad asd asd asd asd sadasdaad adsa dasd sa
        </div>
    </div>
</div>
  

CSS :

 html, body {
height: 100%;
}

#contentwrap {
display: table;
height: 100%;
max-width: 500px;
margin: 0 auto;
position: relative;
}

#contentwrap img {
margin-left: auto;
margin-right: auto;
display:block;
margin-bottom: 10px;

max-width:100%;
}

#content {
height: 100%;
display: table-cell;
text-align:center;
vertical-align:middle;
}
  

Как вы можете увидеть, если протестируете его, атрибут «max-width: 100%» работает только в Google Chrome. В Firefox и IE ширина изображения остается неизменной… В Chrome изображение адаптируется к окну… :

Как я могу это исправить? (по крайней мере, с IE11)

Я нашел другие сообщения с той же проблемой, но ни одно из них не дало хорошего решения…

На самом деле есть очень простое решение этой проблемы — вам нужно установить table-layout свойство для fixed элемента, для которого установлено значение display: table .

 #contentwrap {
    display: table;
    table-layout: fixed;
    height: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}
  

Вот один из способов достижения желаемого макета.

Я пропустил некоторые мобильные классы jQuery и просто использовал собственный CSS / CSS3.

Для этого HTML:

 <div id="contentwrap">
    <div id="content">
        <img width="300" src="http://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png" />
        asdad asd asd asd sadadada ad sad asd asd asd asd sadasdaad adsa dasd sa
    </div>
</div>
  

измените свой CSS следующим образом:

 html, body {
    height: 100%;
}
#contentwrap {
    background-color: beige;
    margin: 0 auto;
    max-width: 500px;
    height: 100%;
    display: table;
}
#content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#content img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
}
  

Я применил таблицы CSS к #contentwrap #content вашему исходному CSS и аналогично ему, таким образом, вы получите вертикальное выравнивание посередине по мере необходимости.

Вы жестко запрограммировали ширину изображения в 300 пикселей, установив width значение в img теге.

Чтобы изображение масштабировалось с шириной по #content мере его сужения по ширине, установите width: 100% , чтобы изображение заполняло ширину #content , и чтобы изображение не становилось слишком широким, установите max-width значение по мере необходимости, 300 пикселей в моем примере.

Вы можете столкнуться с конфликтами с правилами CSS в jQuery Mobile, но, возможно, кто-то другой может помочь с любыми возникающими проблемами (не в моей области знаний).

Смотрите демонстрацию: http://jsfiddle.net/audetwebdesign/ZMLDD /

Примечание: Если вы задаете max-width значение для изображения, вам может не понадобиться устанавливать width атрибут в img теге.

Я проверил это в последних версиях Firefox, Chrome, IE и Opera, и это решение, похоже, работает.

Всегда помните, что максимальная ширина не наследуется от других родительских элементов. Поскольку ширина 300 пикселей была определена с максимальной шириной 100%, начальное значение ширины всегда будет переопределять значение максимальной ширины 100%

Поэтому вместо этого используйте min-width: 300px и max-width: 100% , который заставит его работать во всех браузерах

Адаптивные изображения для Firefox, IE, Chrome. Простое решение, которое работает в Firefox

 <div class="article"><img></div>

.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}