html如何让图片自动消失,html-align-items：center使img消失

发生这种情况是因为在浏览器中呈现百分比高度的方式.

如果不存在align-items：center,则align-items：Stretch(默认值)有效.这会自动为flex项目(div)提供完整高度.

但是,当存在align-items：center时,它将使div垂直居中. div的子级,即max-height：100％的img,实际计算为height：auto,因为父级(div flex项)上没有高度参考.

通过在弹性项目上设置高度可以解决该问题.

.grid > div {

height: 100%;

}

.grid {

display: grid;

grid-template-columns: 1fr 1fr;

height: 100px;

border: 1px solid red;

}

.grid>div {

height: 100%;

}

img {

display: block;

max-height: 100%;

margin: 0 auto;

}

.align {

align-items: center;

}

text

text

详情请见：