使用CSS網格功能時圖像寬度超過容器寬度

我目前正在處理某些佈局，並且在應用CSS網格規則時出現圖像寬度超過容器寬度的問題。使用CSS網格功能時圖像寬度超過容器寬度

請看看下面的代碼。

img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 

 
.page { 
 
    display: grid; 
 
    grid-template-columns: auto minmax(300px, 400px); 
 
    grid-column-gap: 1rem; 
 
    height: 100vh; 
 
} 
 

 
.content { 
 
    grid-column: 1/2; 
 
    background: red; 
 
    width: 100%; 
 
} 
 

 
.sidebar { 
 
    grid-column: 3; 
 
    background: lime; 
 
}

<div class="page"> 
 
    <div class="content"> 
 
    <img src="http://via.placeholder.com/900x400" alt="" width="900" height="400"> 
 
    <p>content</p> 
 
    </div> 
 
    <div class="sidebar"> 
 
    <p>sidebar</p> 
 
    </div> 
 
</div>

我想知道什麼可能導致這個問題。側邊欄必須在300px和400px之間。內容容器應該休息。由於某種原因，圖像破壞了這種佈局設置。

https://codepen.io/sunpietro/pen/ZyNgqe

來源

2017-07-18 sunpietro

你還在尋找一個答案？如果我誤解了你的問題，請告訴我。 –

@Michael_B是的，我仍在尋找答案。在此期間，我通過將固定寬度設置爲內容容器來修復它。出於某種原因，當grid-template-columns中存在自動值時，內容容器會嘗試與其內容相同的寬度（它大於容器的容量） – sunpietro

您是否試過'1fr'而不是'auto' ？ –

固定grid-template-columns。它應該be grid-template-columns: auto 1fr minmax(300px, 400px)。 auto圖片，1fr爲content和minmax(300px, 400px) for側邊欄（它位於第3列）。演示：

img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 

 
.page { 
 
    display: grid; 
 
    grid-template-columns: auto 1fr minmax(300px, 400px); 
 
    grid-column-gap: 1rem; 
 
    height: 100vh; 
 
} 
 

 
.content { 
 
    grid-column: 1/2; 
 
    background: red; 
 
    width: 100%; 
 
} 
 

 
.sidebar { 
 
    grid-column: 3; 
 
    background: lime; 
 
}

<div class="page"> 
 
    <div class="content"> 
 
    <img src="http://via.placeholder.com/900x400" alt="" width="900" height="400"> 
 
    <p>content</p> 
 
    </div> 
 
    <div class="sidebar"> 
 
    <p>sidebar</p> 
 
    </div> 
 
</div>

來源

2017-07-18 20:31:02

你有兩列的網格。

grid-template-columns: auto minmax(300px, 400px);

這意味着有三個格列線：1，2和3

圖像被嵌套在其佔用的第一列的網格項：

.content { 
    grid-column: 1/2; 
}

但是你必須邊欄跳過第二列並從網格列3行開始（顯式網格的末尾）：

.sidebar { 
    grid-column: 3; 
}

這可以分解爲：

grid-column-start: 3; 
grid-column-end: auto;

所以在第二欄沒有任何內容。

試試這個：

.sidebar { 
    grid-column: 2/3; 
}

revised codepen

來源

2017-07-18 20:51:11

使用CSS網格功能時圖像寬度超過容器寬度

回答

相關問題