当页面太短时，如何进行 <img> 收缩而不是发生 y 溢出

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

这个问题可能看起来微不足道，但凭借 3 年的前端开发经验，我在这方面失败了。我创建了一个最小的可重现示例。

这是我的示例代码。为了查看它，我建议创建一个 html 文件并在 iPhone SE 屏幕尺寸 (375x667) 的浏览器中查看代码，这样 y 溢出就会变得明显。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Image and Div Layout</title>
        <style>
            body {
                margin: 0;
            }

            .container {
                max-height: 100vh;
            }

            .container img {
                max-width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="https://wallpapercave.com/dwp2x/wp4471355.jpg" alt="Image">
            <div>
                <p>1Your content here</p>
                <p>2Your content here</p>
                <p>3Your content here</p>
                <p>4Your content here</p>
                <p>5Your content here</p>
                <p>6Your content here</p>
                <p>7Your content here</p>
                <p>8Your content here</p>
                <p>9Your content here</p>
                <p>10Your content here</p>
                <p>11Your content here</p>
                <p>AAAAAAAAAAAAAAAAA</p>
            </div>
        </div>
    </body>
</html>

在这张图片中，您可以看到唯一的数字 8 不再可见，但数字 9、10、11…

enter image description here

我正在笔记本电脑上的 google chrome 开发者工具中测试 iPhone SE 尺寸。

我总是希望能够看到所有的 

<p>
，并且永远不会有任何 y 溢出。如果没有足够的空间，那么 
<img>
元素应该收缩。

因此 

<p>AAAAAAAAAAAAAAAAA</p>
元素应该位于页面的最底部。然后向上剩余的 
<p>
元素，最后图像应该占据剩余的空间。

<img>
应该收缩，因为它的高度和宽度应该以正确的比例变小。关键字：
object-fit: contain
（但这对我不起作用）

图像还应该在其“剩余空间容器”内水平和垂直居中

如果可能的话，我更喜欢不使用任何视口单元的解决方案，因为在我的实际用例中，页面上还有其他元素会与之发生冲突。因此，解决方案应该依赖于当前可用的高度，在本示例中为 100vh，但实际上可能并不总是如此。

但是，如果使用视口确实是唯一解决方案（这将是非常令人惊讶的），那么它也可以使用。

我尝试使用 

height: 100vh
和 flexbox、flex-grow、grid 进行操作，但它们都不起作用。

html css layout responsive-design responsive
1个回答
0
投票

试试这个

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image and Div Layout</title>
    <style>
        body {
            margin: 0;
        }

        .container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-y: hidden;
        }

        .img-container {
            flex: 1 1 auto;
            height: 100%;
            background-color: #550000;
            display: flex;
            justify-content: center;
            overflow-y: hidden;
        }

        .img-container img {
            object-fit: contain;
            max-width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="img-container">
            <img src="https://wallpapercave.com/dwp2x/wp4471355.jpg" alt="Image">
        </div>

        <div>
            <p>1Your content here</p>
            <p>2Your content here</p>
            <p>3Your content here</p>
            <p>4Your content here</p>
            <p>5Your content here</p>
            <p>6Your content here</p>
            <p>7Your content here</p>
            <p>8Your content here</p>
            <p>9Your content here</p>
            <p>10Your content here</p>
            <p>11Your content here</p>
            <p>AAAAAAAAAAAAAAAAA</p>
        </div>
    </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.