Android浏览器扩展图像

Question

我指的是目前正在直播网站。对我来说挺好的。只有一个错误让我发疯：

在标准的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

我的FF DE44+检查器说父<a>大小为0x24，<img>大小为240x164 (这是内联值)。父文件没有z-index，而图像有z-index: 1500。

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

此外，查看“live”站点的代码，比您在问题中声称的要多得多，因为您给出了小图像的值，但是给出了大图片的CSS值(它也有left: auto，而小的站点没有底部、左边、右边)。

你最好再好好看看你的代码，修改你问题中的代码，以反映“实时”版本的代码，否则我们将无法适当地帮助你。

Answer 2

工作是盲目的，因为我没有那个浏览器，但我怀疑问题将是正确的:自动底部: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。

下面是一个Fiddle：https://jsfiddle.net/mnkx66zj/

您还应该希望通过设置徽标链接显示块来增加链接上的可点击区域，并使其与父级大小相等。