У меня есть простая сетка с основной областью сверху и областью навигации внизу. Я только начинаю использовать css grid и у меня возникают проблемы с адаптивным изображением, которое остается в контейнере grid. Когда браузер изменяет размеры, он не сжимается, а расширяется за пределы своего контейнера. Я пробовал min-height / min-width: 0, object-fit: содержать, изменение размеров с vh / vw до 100%, изменение max-width / 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>
Как только я получу ответную реакцию на сетку, это будет слайд-шоу.
Заранее спасибо