Question

我正在使用这种非常棒的CSS技术强制<li>与父<ol> / <ul>一样高，同时保持我选择的宽高比。

我们的想法是制作一个具有目标宽高比的透明GIF或PNG，然后使用该图片按比例拉伸<li> 。

HTML：

<ol>
  <li>
    <img src="1x1.gif" height="1" width="1">
    <div class="content">
      …
    </div>
  </li>
</ol>

CSS：

ol  { height: 50%; } /* half the height of the viewport, let's say */
li  { height: 100%; position: relative; display: inline-block; }
img { height: 100%; width: auto; }
.content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

甜。问题是，如果通过调整视口大小调整<ol>的大小，WebKit将无需重新计算<img>的大小，并且会拍摄宽高比。但是，如果您右键单击<div class="content">并选择“检查元素”，它会大小合适！当你制定this heinous redraw hack：

时也是如此

var image = $('img').get(0);
var oldDisplay = image.style.display;

image.style.display = 'none';
image.offsetHeight; // Secret sauce
image.style.display = oldDisplay;

实际上，我正在尝试根据<img>的大小调整<li>，其大小基于<img>的大小。我怀疑在WebKit中有一个优化可以支持这种循环引用。怎么办？

这是一个JSFiddle，您可以自己体验错误：http://jsfiddle.net/steveluscher/H5Mkm/

Answer 1

这可能远非一个答案 - 但我只是使用相同的隐藏图像技术来制作周围的div伸展和放大保持长宽比例。对我来说工作得很好。也许你可以忽略js，看看CSS / HTML是如何在我的小提琴中运作的：http://jsfiddle.net/kthornbloom/H2G7z/5/

CSS 100％高度（保持纵横比）技巧触发循环WebKit重绘错误

1 个答案: