Android浏览器可以拉伸图像

时间:2015-11-08 20:27:00

标签: android html css

我正在谈论的网站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;
}

Check the Demo

2 个答案:

答案 0 :(得分:8)

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

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

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

答案 1 :(得分:4)

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

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

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

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