CSS 100％高度（同時保持長寬比）技巧觸發循環WebKit重繪bug

我使用這個驚人的真棒CSS技術強制<li>與他們的父<ol>/<ul>一樣高，同時保持我選擇的寬高比。CSS 100％高度（同時保持長寬比）技巧觸發循環WebKit重繪bug

這個想法是製作一個透明的GIF或PNG，以您的目標長寬比爲特徵，然後使用該圖像按比例延伸。

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;

真的，我基於一個<li>其大小是基於該<img>的大小試圖尺寸<img>。我懷疑在這種循環引用中，WebKit有一個優化。該怎麼辦？

這裏有一個的jsfiddle在這裏你可以體驗到的bug自己：http://jsfiddle.net/steveluscher/H5Mkm/

來源

2013-02-20 steveluscher

這大概是目前爲止從答案 - 但我只是用一個隱藏圖像的相同技術，使周圍的div伸展&保持寬高比。爲我工作得很好。也許你可以忽略js，只是看看CSS/HTML如何在我的小提琴中工作：http://jsfiddle.net/kthornbloom/H2G7z/5/

來源

2013-02-20 19:52:05 kthornbloom

啊是的。寬度相關問題的人很容易。礦是一個與身高有關的問題，即。一個受傷的世界。 – steveluscher 2013-02-20 20:33:04

CSS 100％高度（同時保持長寬比）技巧觸發循環WebKit重繪bug

回答

相關問題