height: auto для ios < 6

[kattiperk]

Здравствуйте.

Проблема в height: auto; для iOS устройств ниже 6 версии.
В контейнере есть картинка, которая имеет свойства width: 100% и height: auto;

Но iOS отказывается понимать и тянет на всю высоту, оставляя ширину в порядке. То есть картинку изрядно плющит.

Нашла пару запросов, но советовали только height: auto !important; С высотой работает через медиа запрос для aspect ratio. Но интересно, может есть заклятье?

[Great Rash]

Допустим размер картинки 250х100. 100 - это 40% от 250 (100 / 250 = 0.4). Далее код. Минусы: проценты придётся считать для каждой картинки отдельно, в некоторых случаях может потребоваться дополнительная обёртка.

[kattiperk]

Да, ну у меня почти так, только для @media. Понятнелько, спасибо.

[Igor Schnaider]

Странно, я посмотрел на 4s, 5 и 5s и ничего такого не увидел. Можете показать ваш пример, просто интересно стало.

Смотрел, правда, через xcode, не на реальном устройстве.

Edited November 26, 2015 by Igor Schnaider

[kattiperk]

Могу. На эмуляторе всё ок.

 

http://cs631924.vk.me/v631924798/92e/_vc3tNhHz-8.jpg- фон, там bachground-size: auto 100%;

 

http://cs631924.vk.me/v631924798/91c/nj8gkgWFdK8.jpg- начало картинки, http://cs631924.vk.me/v631924798/925/_4SrKzTz238.jpg - конец картинки

Высота на auto или 100% не работает

Edited November 26, 2015 by kattiperk

[Great Rash]

Странно, я посмотрел на 4s, 5 и 5s и ничего такого не увидел

Возможно потому, что у вас ОС там стоит более свежая? Вроде на iPhone 5 можно как минимум iOS 7 ставить. 

[Igor Schnaider]

Возможно потому, что у вас ОС там стоит более свежая? Вроде на iPhone 5 можно как минимум iOS 7 ставить.

Нет, на 6.1 смотрел.

 

На эмуляторе всё ок.

А я раньше полагался на него при тестировании верстки.

[Great Rash]

Нет, на 6.1 смотрел.

Ну, так ведь проблема на версии ниже 6.

[kattiperk]

В общем, надо задавать высоту. Труда не составляет, но обидно стало

[Great Rash]

На самом деле iOS в целом и мобильный Safari в частности - такой калл, что даже диву даёшься иногда Ща уже всех нюансов не вспомню, но гемора больше всего было с айфонами и андроид 2.2.

[Igor Schnaider]

 

Нет, на 6.1 смотрел.

Ну, так ведь проблема на версии ниже 6.

 

Да, я невнимательно посмотрел. Сейчас проверил на 5.1 - все то же самое. В общем, проверил вплоть до 9 версии (на эмуляторе), везде нормально отображает.

Но все равно не понимаю, зачем ему тянуть картинку по высоте контейнера? Странно как-то.

 

http://cs631924.vk.m..._vc3tNhHz-8.jpg-фон, там bachground-size: auto 100%; http://cs631924.vk.m...nj8gkgWFdK8.jpg- начало картинки, http://cs631924.vk.m..._4SrKzTz238.jpg - конец картинки Высота на auto или 100% не работает

А можете показать разметку со стилями?

[kattiperk]

.trainer-block-wrapper:before,.trainer-block-wrapper:after {    content: '';    position: absolute;    display: block;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: -1;}.trainer-block-wrapper:after {    background-image: url(../img/media/trainer.png);    background-repeat: no-repeat;    background-position: 185px 16px;    background-size: auto 100%;}.trainer-block-wrapper:before {    background: url(../img/media/effect.png);    background-repeat: no-repeat;    background-position: -50px 0;}

<div class="trainer-block-wrapper">            <div class="trainer-block">                <div class="trainer-content clearfix">                    <h3 class="trainer-heading">ШЕВЧЕНКО СЕРГЕЙ ВЛАДИМИРОВИч</h3>                    <div class="trainer-text-wrapper">                        <p>                            Основатель и руководитель международной организации  Вин Чун Кунг Фу Ушу «Дом Вечной Весны».                        </p>                        <p>                            Дай Сихинг международной организации EBMAS (Emin Boztepe Martial Arts System) — ученик Эмина Бозтепа.                        </p>                        <p>                            Чемпион Украины по Ушу Саньда. Стаж занятий Ушу 25 лет, тренерский стаж 17 лет.                        </p>                        <p>                            Коуч и создатель оригинальной программы «Саморазвитие и самосовершенствование. Путь Вечной Весны».                        </p>                        <p>                            Автор методики физической и психологической реабилитации для детей с особенностями развития (аутизм, ДЦП).                        </p>                    </div>                </div>            </div>        </div>

Ссылка - http://wingchung.com.ua/web/index.html

[Igor Schnaider]

Подождите, так вы про background-size говорите, а не про картинку?

 

Вот сейчас даже на эмуляторе видно это, так что все ok ;-)

 

У вас в стилях (media.css) прописано:

@media screen and (max-device-width: 480px) and (orientation: portrait) and (device-aspect-ratio: 2/3) {   ...    .trainer-block-wrapper:after {        background-size: 350px 100%;    }   ...}

Может, auto 100%.

[kattiperk]

Да, стили я дописала.

Фон плющит и картинки тоже, просто мне лень было прикреплять.

Всем спасибо за участие, ничего не решилось особо

[Fantastic]

Извините что пишу в эту тему, в личку вам писать не могу, а за этой темой вы следите. (да и почты вашей нет, а вот в скайп дальше напишу.) Хотел бы у вас уточнить, вы меня заблокировали в скайпе? (mr.fantastic-1993) а то не отвечаете и почти 2 недели не в сети.  А то я прододжаю писать, думаю может вы зайдете и все прочитаете а если вы заблокировали, то хоть буду знать.

 

P.S. Прошу модератеров/администраторов до ответа не удалять сообщение, так как это единситвенный способ связаться с человеком. (как я уже и написал выше)

[kattiperk]

Привет. Я что-то занята очень и немного заболела. Я все прочитаю, но позднее.