0

我正在使用这种非常棒的 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">并选择“检查元素”，它会自动调整大小！当你实施这个令人发指的重绘黑客时也是如此：

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

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

真的，我正在尝试根据 an<img>的大小来调整 an 的大小，<li>其大小基于<img>. 我怀疑 WebKit 中有一个优化这种循环引用的方法。该怎么办？

这是一个 JSFiddle，您可以在其中亲自体验该错误：http: //jsfiddle.net/steveluscher/H5Mkm/

4

1 回答 1

0

这可能远非一个答案——但我只是使用了相同的隐藏图像技术来使周围的 div 拉伸并保持纵横比。对我来说效果很好。也许你可以忽略 js，看看 CSS/HTML 在我的小提琴中是如何工作的：http: //jsfiddle.net/kthornbloom/H2G7z/5/

 .
于 2013-02-20T19:52:05.147 回答