如何使用CSS实现高度为父容器90%的图片居中且四边边距相等

调整后的CSS代码如下 #

/* 父容器样式 */
div {
    margin-top: 50px; 
    width: 40%; 
    box-shadow: 0 0 10px 0px rgb(0 0 0 / 8%); 
    height: 60vh; 
    /* 新增flex配置实现子元素居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 图片样式 */
img { 
     object-fit: contain; 
     /* 高度固定为父容器的90% */
     height: 90%;
     width: auto;
     /* 限制最大宽度，避免宽图超出父容器 */
     max-width: 90%;
}

调整说明 #

• 父容器新增flex布局属性，实现图片默认水平垂直居中，无需手动计算边距
• 图片高度设为父容器的90%，直接匹配需求的高度占比
• 图片宽度设为auto，保留原始宽高比避免变形
• 新增max-width: 90%适配宽高比过大的图片，避免宽度超出父容器，保证无论图片横竖版，四边都能得到相等的边距

内容的提问来源于stack exchange，提问作者Tinchardox