Question

我需要一个最大宽度为其容器100％的图像并保持宽高比。当我这样做时，当窗口达到特定宽度时，我得到一个没有滚动内容的滚动条（禁用的滚动条）。

当调整图像的宽度（由于最大宽度）并且高度刚好适合时，请使窗口的像素高度降低2个像素。让我给你一个视频，因为很难解释： https://dump.video/i/4otCA8.mp4

从这一点开始： -Chrome提供了一个启用的滚动条。现在将高度调整为大1像素时，滚动条将被禁用。重新加载后：禁用滚动条。 -即使重新加载后，Firefox也会立即提供禁用的滚动条。

这会给动画和其他东西带来非常讨厌的闪烁。

已尝试： -溢出-x隐藏在容器/主体上 -其他许多调整

需要： -类形式必须为flex

设置固定高度可解决此问题，但会产生不良结果：没有自动调整大小的图像和长宽比损坏

最小示例：

<html>
    <head>
        <style>
            * {
                padding:0;
                margin:0;
                box-sizing:border-box;
            }

            img {
                display:block;
                max-width:100%;
            }

            .container {
                width:40%;
                min-height:100vh;
                background:#ccc;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="http://formbuilder.local.nl/api/Formbuilder.Tests.color?&color=blue&" />
        </div>
    </body>
</html>

所以我的问题是：如何使用图像上的width：100％而不在约束器或图像字段上使用固定的高度来摆脱滚动条。

Answer 1

您可以使用高度：

img {
display: block;
max-width: 100%;
height: 100%;

}

Answer 2

因此，发生的事情是您没有重置布局，这意味着布局将以默认的边距开始。

因此，我的建议是通过执行以下操作来重置它：

* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}

要查看工作示例，请查看我制作的代码笔。 https://codepen.io/pedro-figueiredo/pen/MMYddE

图片最大宽度使滚动条没有滚动高度

2 个答案: