圖像遍歷容器標籤的填充

我正在嘗試創建一個窗口小部件邊欄，並遇到顯示圖像的問題。邊欄從各個方面都有20像素的填充，並且圖像的寬度設置爲自動。但是，當我顯示圖像時，它會覆蓋容器的填充而不是將其大小調整爲填充。下面是代碼（CSS）：圖像遍歷容器標籤的填充

aside { 
    top: 0px; 
    height: 100%; 
    display: block; 
    position: fixed; 
    width: 30%; 
    background: #f9f9f9; 
    padding: 20px; 
    border-left: 1px solid #e3e3e3; 
} 

img { 
    border: 0; 
    width: auto; 
    max-width: 100%; 
    height: auto; 
} 

*, *::before, *::after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
}

HTML：

<aside> 
    <div class="widget"> 
    <img src="/disk.png"> 
    </div> 
<aside>

小部件類沒有風格，因爲我還沒有實現它，由於這個問題。屏幕截圖如下：http://imgur.com/Gw1E0lg（即容器結束的地方）。我該如何解決這個問題？我怎樣才能使圖像的寬度自動減少20px，這樣它就與父級的CSS規則一致？

來源

2014-09-02 Gasim

如果你會提供任何小提琴 – pie6k 2014-09-02 12:25:57

我會找到答案，問題是在固定位置由於某種原因，它正在將它移動到-20px ... – Gasim 2014-09-02 12:35:15

請autoanswer你的問題，所以它不會保持開放。 – fernandopasik 2014-09-02 16:45:44

我自己找到答案。當使用沒有正確屬性的固定CSS位置時，至少在safari和chrome中，塊將與父容器的寬度對齊。因此，如果該塊：

<nav style="position:fixed;left:0px;width:80px;"> 
</nav> 
<main style="margin-left:80px;padding:10px;position:relative"> 
    <div class="content" style="width:80%"> 
    </div> 
    <aside style="width:20%;position:fixed;top:0px"> 
     <div class="widget"> 
     <img src="/disk.png"> 
     </div> 
    <aside> 
</main>

的一邊看起來就像是適合main元素的右邊欄。但是由於固定位置的寬度是相對於窗口而不是父窗口的，它的正確位置基本上是從屏幕開始的，「20％」對於父窗口是20％，忽略了其他寬度。我不知道爲什麼safari和chrome會以這種方式渲染它，但是由於這一點以及圖像大小的不幸，它比旁觀元素小了10px，所以我無法弄清楚這個問題甚至是可能的。

因此，要得到我想要的東西，我改變aside的立場，以absolute並添加overflow-y:scroll我content類作爲右杆不應該移動。是的，我可以玩正確的酒吧的寬度，但在我的項目，這是我現在最擔心的問題

來源

2014-09-04 05:33:11 Gasim

圖像遍歷容器標籤的填充

回答

相關問題