预览网址:https://asilklife.myshopify.com/?preview_theme_id=132753031414

图像的大小是800 pxx800px,为什么网格容器的高度总是多6px。
<div class="grid-wrapper">
<div class="wrapper-item">
<img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
</div>
<div class="wrapper-item">
<img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
</div>
<div class="wrapper-item">
<img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
</div>
<div class="wrapper-item">
<img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
</div>
</div>
<style type="text/css">
.grid-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
background-color: red;
}
.wrapper-item img {
width: 100%;
max-width: 100%;
height: auto;
}
</style>
发布于 2022-05-16 04:17:12
<img>的默认显示值为内联,因此添加display: block;。
<div class="grid-wrapper">
<div class="wrapper-item">
<img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
</div>
<div class="wrapper-item">
<img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
</div>
<div class="wrapper-item">
<img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
</div>
<div class="wrapper-item">
<img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
</div>
</div>
<style type="text/css">
.grid-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
background-color: red;
}
.wrapper-item img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}
</style>
https://stackoverflow.com/questions/72254054
复制相似问题