Android-браузер растягивает изображение

Сайт, о котором я говорю, в настоящее время живет. Это хорошо работает для меня. Есть только одна ошибка, которая сводит меня с ума:

В стандартном Android-браузере (протестированном на 4.1.2, LG) логотип растягивается и изменяется очень плохо. Ниже вы можете увидеть демо.

CSS для позиционирования и определения размера логотипа достаточно прост, используя position: absolute в элементе position: fixed:

Разметка

<div class="fixed">
   <div id="logo">
      <a href="logo-link">
        <img src="logo.jpg" height="55" width="34">
      </a>
   </div>
</div>

CSS

* {box-sizing: border-box} /* bootstrap system */

.fixed {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  height: 85px;
}

.logo {
  width: 85px;
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
}

img {
   margin: 20px 27px;
   max-width: 40px;
   height: auto;
   display: inline-block;
}

Проверить демонстрацию

Ответы

Ответ 1

Мой FF DE44 + инспектор говорит, что родительский <a> имеет размер 0x24 и <img> размером 240x164 (которые являются встроенными значениями). Родитель не имеет z-index, а изображение имеет z-index: 1500.

Мне кажется, что браузер андроида не имеет родительских значений ширины и высоты, которые он может ссылаться, в то время как bottom: auto и right: auto заставляет его делать.

Более того, если посмотреть на код "живого" сайта, вам будет больше, чем вы заявляете в своем вопросе, потому что вы даете значения небольшого изображения, но CSS большого (который также имеет left: auto, а у маленькой - ни дно, ни слева, ни справа).

Лучше еще раз взглянуть на свой код и пересмотреть код в своем вопросе, чтобы отразить код "живой" версии, иначе мы не сможем вам правильно помочь.

Ответ 2

Работает слепой, потому что у меня нет этого браузера, но я подозреваю, что проблема будет правильной: auto bottom: auto.

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 85px;
}

#logo {
  width: 85px; height:85px;
  position: absolute;
  top: 0;
  left: 0;
  background-color:pink;
}
#logo a { display:block; width: 85px; height:85px; }

img { margin:15px 25px; }

Поскольку ширина известна, попробуйте заменить auto на фактические цифры.

Вот сценарий: https://jsfiddle.net/mnkx66zj/

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