Android浏览器拉伸(stretch)图像

我正在谈论的网站is currently live。对我来说效果很好。只有一个错误使我发疯:

在标准 Android浏览器(已在LG 4.1.2上测试)上，徽标的拉伸(stretch)和尺寸调整非常不好。您可以在下面看到一个演示。

定位和调整徽标大小的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;
}

最佳答案

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

在我看来，Android浏览器没有可引用的width和height父值，而bottom: auto和right: auto迫使它这样做。

此外，查看“实时”网站的代码比在您的问题中声称的要多得多，因为您提供的是小图片的值，但是大图片的CSS(也有left: auto，而小个子根本没有底部，左侧，右侧)。

您最好再仔细看看您的代码，然后修改问题中的代码以反射(reflect)“实时”版本的代码，否则我们将无法正常为您提供帮助。

关于Android浏览器拉伸(stretch)图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33598655/

android浏览器

Android浏览器拉伸(stretch)图像