如何实现img元素随父元素宽度响应式调整且不超过自身原始尺寸

样式修改代码 #

修改后的#image样式 #

#image{
    border-radius: 25px;
    /* 改为块级元素方便居中 */
    display: block;
    /* 上下边距保留，左右自动居中替代原来的10%左右margin */
    margin: 60px auto 0;
    /* 响应式核心配置 */
    width: 80%;
    /* 限制最大宽度不超过图片原始尺寸，同时不会超出父元素宽度 */
    max-width: 100%;
    /* 高度自适应，保持原始宽高比不形变 */
    height: auto;
    object-fit: contain;
}

修改后的#img-div样式 #

#img-div {
    background-color: #a9dce3;
    width: 96%;
    /* 固定高度改为最小高度，适配不同尺寸的图片和屏幕 */
    min-height: 600px;
    margin: 0 2%;
    border-radius: 25px;
    /* 弹性布局实现图片垂直水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

修改说明 #

• 原代码中给img设置的固定height: 80%会打破图片原始宽高比例，且没有设置最大宽度限制，当父元素尺寸超过图片原始尺寸时，图片会被强行拉伸导致模糊。
• 原父元素固定height: 600px的写法在小屏幕下会出现溢出或留白过多的问题，改为min-height后既保留了原本的高度要求，也能适配不同场景的内容高度。
• 新增的max-width: 100%和height: auto组合可以保证图片最大不会超过自身原始尺寸，同时在父元素宽度缩小时自动响应式缩小，始终保持80%的父元素宽度占比。

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