【发布时间】：2020-02-23 23:52:02
【问题描述】：
我有一个简单的网格布局，顶部有一个主要区域，底部有一个导航区域。我刚刚开始使用 css 网格，并且无法将响应式图像保留在网格容器中。当浏览器调整大小时，它不会响应收缩，而是延伸到其容器的边框之外。我尝试过 min-height/min-width: 0, object-fit: contains, 将尺寸从 vh/vw 更改为 100%，将 max-widths/heights 更改为不同的 px 和 % 尺寸，但我仍然无法弄清楚如何使用网格做出响应。我进行了广泛的搜索，但似乎没有任何帮助。我确定这是我错过的一些简单的事情，但我现在不知所措。
如果可能的话，我还想只使用 HTML 和 CSS，而不需要像 Bootstrap 这样的库。
我在不同的元素上添加了一些大纲，以便更容易看到在 sn-p 中似乎没有显示的正在发生的事情，所以如果更容易检查这里的代码，这里有一个指向该站点的链接： https://mountainflow.design/portfolio.html
/* Box Sizing */
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/* body 100% with no margin or padding */
html {
height: 100vh;
}
body {
min-height: 100vh;
}
html,
body {
margin: 0;
padding: 0;
}
/* =================== Start Style Sheet ==========================
================================================================ */
body {
background-color: #000000;
color: #ffffff;
}
a {
color: inherit;
text-decoration: none;
}
/* Main Section */
.folio-main-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80% 1fr;
height: 100vh;
width: 100vw;
}
.folio-main {
outline: blue solid thin;
grid-column: 1 / 3;
grid-row: 1 / 2;
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
min-width: 0;
}
.gallery-container {
outline: pink solid thin;
max-width: 970px;
min-height: 0;
min-width: 0;
position: relative;
}
/* .slideshow {
display: none;
} */
.slideshow img.responsive {
max-width: 970px;
height: auto;
}
/* .caption {
} */
/* Nav Section */
.folio-nav {
outline: red solid thin;
grid-column: 1 / 2;
grid-row: 2 / 3;
align-self: end;
justify-self: end;
padding: 2em;
}
.folio-nav ul {
display: flex;
flex-direction: row;
list-style-type: none;
}
.folio-nav li {
background: -webkit-linear-gradient(#eeeeee, rgb(158, 104, 246));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
li {
margin-left: 2em;
}
/* Button animations */
.folio-nav li:nth-child(1) {
position: relative;
left: -1000px;
animation: navFadeIn 3s ease-in 2s forwards;
}
.folio-nav li:nth-child(2) {
position: relative;
left: -1000px;
animation: navFadeIn 3s ease-in 1.85s forwards;
}
.folio-nav li:nth-child(3) {
position: relative;
left: -1000px;
animation: navFadeIn 3s ease-in 1.7s forwards;
}
.folio-nav li:nth-child(4) {
position: relative;
left: -1000px;
animation: navFadeIn 3s ease-in 1.55s forwards;
}
.folio-nav li:nth-child(5) {
position: relative;
left: -1000px;
animation: navFadeIn 3s ease-in 1.4s forwards;
}
@keyframes navFadeIn {
0% {
opacity: 0;
}
85% {
left:0;
}
89% {
left: -5px;;
}
93% {
left: 0;
}
97% {
left: -3px;
}
100% {
left:0;
opacity: 1;
}
}<body>
<div class="folio-main-container">
<div class="folio-main">
<div class="gallery-container">
<div class="slideshow">
<a target="_blank" href="https://sheltered-meadow-24497.herokuapp.com/" title="Fur Butlr">
<img class="responsive" src="https://github.com/mountainflow/portfolio_03/blob/master/assets/images/furButlr_970x600.png?raw=true" alt="Fur Butlr" />
</a>
<div class="caption">Fur Butlr</div>
</div>
</div>
<!-- <div class="gallery-container">
<a target="_blank" href="https://chat-meme-3fbf6.firebaseapp.com/" title="ChatMeme">
<img src="./assets/images/chatMeme_970x600.png" alt="ChatMeme" />
</a>
</div>
<div class="gallery-container">
<a target="_blank" href="https://mighty-everglades-33601.herokuapp.com/" title="Friend Finder">
<img src="./assets/images/friendFinder_970x600.png" alt="Friend Finder" />
</a>
</div>
<div class="gallery-container">
<a target="_blank" href="./assets/images/liri.gif" title="Liri">
<img src="./assets/images/liri_970x600.png" alt="Liri" />
</a>
</div> -->
</div>
<div class="folio-nav">
<ul>
<li><a href="./index.html" title="Home">Home</a></li>
<li><a href="./assets/CV/greg-olson-resume.pdf" title="Resume">Resume</a></li>
<li><a href="#" title="About Me">About</a></li>
<li><a href="https://github.com/mountainflow" title="GitHub">Github</a></li>
<li><a href="https://www.linkedin.com/in/greg-olson-mountainflow" title="LinkedIn">LinkedIn</a></li>
</ul>
</div>
</div>
</body>一旦我确定了网格响应性，这将是一个幻灯片。
提前致谢
【问题讨论】：
标签： html css image flexbox css-grid