个人中心
gpt4 book ai didi

html - 在浏览器调整大小时，大图像不会缩小到 css 网格容器

转载 作者：行者123 更新时间：2023-11-27 23:09:31 25 4
gpt4 key购买 nike

我有一个简单的网格布局，顶部有一个主区域，底部有一个导航区域。我刚开始使用 css 网格，但在网格容器中保留响应式图像时遇到了问题。当浏览器调整大小时，它并没有响应地缩小，而是延伸到其容器的边界之外。我试过 min-height/min-width: 0, object-fit: contain, 改变尺寸从 vh/vw 到 100%, 改变 max-widths/heights 到不同的 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>

一旦我得到网格响应，这将是一个幻灯片。

提前致谢

最佳答案

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

关于html - 在浏览器调整大小时，大图像不会缩小到 css 网格容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58595591/

25 4 0
文章推荐： php - 如何使用引导行类为卡片创建 3 列
文章推荐： html - 线性渐变在 Safari 上不显示正确的颜色
文章推荐： c++ - goto语句在C++中的用法
文章推荐： css - 桌面浏览器上的用户可扩展问题 : all of CSS disappears when zooming out to 33% and less
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com