我不知道如何在 CSS 网格中调整图像大小。
我根本不介意图像是否被剪裁，但我希望我的旁边元素调整图像大小，以便在调整网页大小时缩小/增长以尽可能最好地填充元素。
网格布局正在调整 @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;
}
最佳答案
你只需要将它添加到你的 css 中:
aside img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
你旁边的图像需要使用 100% 的空间(在旁边区域内)，这就是你需要宽度和高度为 100% 的原因。此外，通过使用 object-fit: cover，img 将保持宽高比。
这是一个 fiddle : https://jsfiddle.net/cisco336/n5dzte8m/
关于css - CSS 网格中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53932914/