HTML图像无法正确放大和缩小规模

当使用Flex框而不是使用宽度和高度来设置Element属性时，请try 使用Flex-Shrink和Flex-Grow.在这里，我告诉您的代码缩小图像以适应弹性盒的大小.您的按钮也会增长以填充剩余空间，以保持图像和视频项目的中心.(我还将媒体栏更改为弹性行类型)我也希望我正确理解了你的问题.因为我不太确定你是想调整它还是必须让它响应.为了使该设计响应性强，父元素非常重要.

    .media-bar {
    display: flex;
}

.media-viewer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex: 1;
}

.media-socket {
    display: flex;
    height: 300px;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.input-socket {
    height: 100%;
    flex-shrink: 1;
}

.input-socket-item {
    max-height: 100%;
}

.flex-button {
    flex-grow: 1;
}

    <div class="media-bar">
        <div class="media-viewer">
            <div class="action-bar">
                actionbar
            </div>
            <div class="media-socket">
                <div class="flex-button">
                    <button>Previous</button>
                </div>
                <div class="input-socket">
                    <img class="input-socket-item" src="null">
                    <video class="input-socket-item"></video>
                </div>
                <div class="flex-button">
                    <button>Next</button>
                </div>
            </div>
            <div class="media-selector">
            </div>
        </div>
    </div>