Я не могу понять, как изменить размеры изображений в CSS Grid.
Я не против, если изображение обрезается вообще, но я бы хотел, чтобы мой элемент в стороне изменил размер изображения так, чтобыон уменьшается / увеличивается, чтобы заполнить элемент как можно лучше при изменении размера веб-страницы.
Макет сетки настраивается с помощью @media (min-width: 600px) { /* tablet */ и @media (min-width: 1600px) { /* desktop */.
HTML:
<body>
<div class="container">
<header>
<a href="./index.html">Home</a>
<a href="./getting-started.html">Getting Started</a>
<a href="./tracks.html">Tracks</a>
<a href="./contact-us.html">Contact Us</a>
</header>
<main>Content</main>
<advert>Advert</advert>
<aside>
<img src="https://jagrotax.co.uk/wp-content/uploads/2013/01/mojo-tyres-rotax-max.jpg" alt="Mojo Kart Tyre list">
</aside>
<footer>Maximilian Crosby ©</footer>
</div>
</body>
CSS:
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 8% 10% 70% 10% 2%;
grid-gap: 10px;
grid-template-areas: /* mobile */
"header"
"advert"
"main"
"aside"
"footer";
font-family: 'Comfortaa', cursive;
min-height: 1000px;
background: #BCF9FF;
text-align: center;
}
header {
background: #A6CFFF;
grid-area: header;
display: flex;
flex-wrap: wrap;
font-size: 26px;
justify-content: space-evenly;
align-items: center;
padding: 0px 40px 0px;
}
main {
background: #A6CFFF;
grid-area: main;
}
advert {
background: #A6CFFF;
grid-area: advert;
}
aside {
background: #A6CFFF;
grid-area: aside;
}
footer {
grid-area: footer;
}