Android浏览器可以拉伸图像

Question

我正在谈论的网站is currently live。它对我很有用。只有一个错误让我发疯：

在标准 Android浏览器（在4.1.2，LG上测试）上，徽标会以非常糟糕的方式拉伸和调整大小。你可以在下面看到一个演示。

在position: absolute元素上使用position: fixed，用于定位和调整徽标大小的CSS非常简单：

标记

<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;
}

Answer 1

盲目工作，因为我没有浏览器，但我怀疑问题是正确的：自动底部：自动。

.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/

您还应该通过制作徽标链接显示块来增加链接上的可点击区域，并使其等于父级大小。

Answer 2

我的FF DE44 +检查员说，父<a>大小为0x24，<img>大小为240x164（内联值）。父级没有z-index，而图片有z-index: 1500。

在我看来，在bottom: auto和right: auto迫使它执行时，android浏览器没有可以引用的宽度和高度父值。

此外，查看＆＃39; live＆＃39;的代码网站上的内容比您在问题中声称的要多，因为您提供的是小图片的值，但是大图片的CSS（也有left: auto的CSS，而小图片没有底部，左边，对了吧。

您最好仔细查看代码并修改问题中的代码，以反映“直播”的代码。版本，否则我们将无法正确帮助您。