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