我正在使用这种令人赞叹的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/

最佳答案

这可能离答案还很远,但我只是使用了隐藏图像的相同技术来使周围的div伸展并保持宽高比。对我来说很好。也许您可以忽略js,而只是看看CSS / HTML是如何工作的:http://jsfiddle.net/kthornbloom/H2G7z/5/

 .

09-19 16:27