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

问题描述 投票：0回答：1

我有以下 HTML 代码（简化）

<div class="media-bar">
    <div class="media-viewer">
        <div class="action-bar">

        </div>
        <div class="media-socket">
            <button></button>
            <div class="input-socket">
                <img class="input-socket-item">
                <video class="input-socket-item"></video>
            </div>
            <button></button>
        </div>
        <div class="media-selector">

        </div>
    </div>
</div>

还有这个 CSS 代码：

.media-bar {
    height: 60vh;
    display: flex;
}

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

.media-socket {
    min-height: 300px; /* Temp */
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
}

.input-socket {
    justify-content: center;
}

.input-socket-item {
    object-fit: contain;
    width: 100%;
    height: auto;
}

但是，无论我尝试什么，我都无法让 .input-socket-item 按我想要的方式缩放（或者说实话，根本无法缩放，除非我手动设置高度！）。我希望它能够缩放以适应 .input-socket。图像的高度无法正确缩小，因此图像被截断。如果我切换宽度和高度字段，同样的问题仍然存在，但只是宽度。任何帮助将不胜感激，因为我无法弄清楚这一点。

html css
1个回答
0
投票

当使用 Flex 框而不是使用宽度和高度来设置元素属性时，请尝试使用 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;
}

</head>
<body>

    <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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.