使用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网格功能时图像宽度超过容器宽度

回答

相关问题