Question

我有一个简单的网格布局，顶部有一个主要区域，底部有一个导航区域。我只是开始使用CSS网格，而在网格容器中保留响应式图像时遇到了麻烦。当浏览器调整大小时，它并没有响应地收缩，而是超出了其容器的边界。我尝试了最小高度/最小宽度：0，对象适合：包含，将尺寸从vh / vw更改为100％，将最大宽度/高度更改为不同的px和％尺寸，但我仍然不知道如何使用网格使其响应。我进行了广泛的搜索，但似乎无济于事。我敢肯定，我错过了一些简单的事情，但是现在我茫然了。

如果可能的话，我也只想使用HTML和CSS，而不使用任何类似Bootstrap的库。

我在不同的元素上添加了一些轮廓，以便更轻松地查看片段中似乎没有显示的正在发生的事情，因此，如果更容易检查代码，则这里是指向该站点的链接： 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>

一旦我确定了网格响应能力，这将是一个幻灯片。

预先感谢

Answer 1

max-width: 100%将满足您的需求。

大图像无法在浏览器调整大小时缩小到CSS网格容器

1 个答案: