1

今天我发现 Firefox 18.0.2 的一个奇怪行为。即使更新到 FF19.0 也无济于事。

我需要创建具有动态大小并保持特定纵横比的拇指。可能还有其他更好的解决方案，如下所示。

Html: - 文档类型是 HTML5

<div class="img">
   <img alt="" src="/blank.gif" class="imgScalar">
   <div class="imgA">
       <div class="imgP">
           <div style="background-image:url(-pathToThumb-)" class="thumb"></div>
       </div>
   </div>
</div>

“blank.gif”的固定大小为 2x2px。具有相同的边长很重要。

CSS：

.img {
    position: relative;
    overflow: hidden;
    margin: 1px 0;
}
.img .imgScalar {
    width: 100%;
}
.img .imgA {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('../gfx/loader.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.img .imgP {
    padding: 0 1px;
    height: 100%;
    overflow: hidden;
}
.img .thumb {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.img .imgScalar,
.img.r16-9 .imgScalar {
    margin-bottom: -43.75%;
}
.img.r16-10 .imgScalar {
    margin-bottom: -37.5%;
}
.img.r4-3 .imgScalar {
    margin-bottom: -25%;
}
.img.r9-16 .imgScalar {
    margin-bottom: 77.77777777777777%;
}
.img.r10-16 .imgScalar {
    margin-bottom: 60%;
}
.img.r3-4 .imgScalar {
    margin-bottom: 33.333333333333314%;
}

对我来说的好处是，我可以在点击@media 规则时通过 CSS 切换宽高比。

@media (max-width: 767px) {
    .img.r9-16 .imgScalar,
    .img.r10-16 .imgScalar,
    .img.r3-4 .imgScalar {
        margin-bottom: -25%;
    }
}

作为信息：这被集成在默认为 1200px 宽度的静态布局中，如果分辨率低于 1200px 并且客户端浏览器支持规则并且还对移动分辨率做出反应 - 仅 CSS 所有内容。

我已经用 Google Chrome、Opera、Safari、Internet Explorer 和我的 iPhone 测试了上述内容，它似乎可以在这些测试的设备上运行……唯一这样做的浏览器是 Firefox。

似乎是什么问题：

因为.thumb是绝对定位的.imgA的子元素，所以背景大小似乎应用于 .imgA 的下一个相对父级，而不是.thumb本身也是相对定位的。出于测试目的，我还将.imgP 设为相对，但这也无济于事。

临时解决办法：

html:

<div class="img">
    <div class="imgWrap">
        <img alt="" src="/iS16-9.gif" style="background-image:url(-imgPath-)" class="imgScalar">
    </div>
</div>

iS16-9.gif 是几个用作“帮助”元素的空白图像之一。顾名思义，它有 16px 的宽度和 9px 的高度来表示纵横比。

CSS：

.img > .imgWrap {
    position: relative;
    margin: 1px;
    background-image: url('../gfx/loader.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.img > .imgWrap > img {
    width: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

太糟糕了，我现在错过了在不使用 javascript-components 的情况下响应不断变化的分辨率的能力。

也许你们中的一些人知道如何解决这个问题？

//编辑：我检查了哪些浏览器与第一个解决方案不兼容：

  • 火狐
  • 冰鼬
  • 风波濑 0.5.8
  • 冰猿
  • 海猴子

除了 MSIE5.5 之外的任何其他浏览器都没有问题 - 即使 MSIE6.0 似乎也能够处理这个问题。只有基于 mozilla 的浏览器在所有版本中都完全失败了（我见过的甚至是 20 个）

4

1 回答 1

0

经过几个小时的调试，我已经能够自己解决问题。感谢@IgorJerosimic 推动我在 jsfiddle 上发布示例。发布我的示例后，我可以看到，代码本身完全符合它应该做的事情。

这个问题与缩放的方式无关。事实上，它导致了我的 css-grid-system 在处理列时的行为方式。我需要使用有点棘手的 inline-block 而不是使用 float - Firefox2.0 的旧后备导致崩溃。

display: inline-block;
display: -moz-inline-grid;
vertical-align: top;
min-height: 1px;

删除不推荐使用的行显示后：-moz-inline-grid; 一切都恢复正常了。（代码最初来自德国页面http://bittersmann.de/articles/inline-block/example9.html）

第一种解决方案是跨浏览器兼容甚至到MSIE6.0（如果为背景的缩放功能添加过滤规则，否则图像按比例格式化但不放大或缩小）。诚然，所需的代码量有点重......但到目前为止，这是我制作响应式自动缩放图像框的唯一解决方案，例如用于具有固定比例的拇指预览并避免图像周围出现黑色条纹。

如何优化？

从现在开始，问题是如何最好地优化第一个示例的代码以避免过多的流量。如果我比较两个样本，第一个样本和第二个样本之间的大小差异为 26%。在有 250 个缩略图的画廊中，第一个样本将产生 12.250 个字符的开销。根据 UTF-8 字符集计算，这将是（如果我计算正确的话）11,9kB 的流量或对于具有 30kB 下行链路的慢速“DSL”，每个请求的差异为 0.399 秒。

亲切的问候，并希望这可能会帮助可能面临这个问题的人，

多米尼克·哈比希茨贝格

于 2013-02-22T07:29:43.530 回答