Question

我的图片高度为100％，宽度为auto。它应该始终是正方形而不是倾斜的。如果您调整浏览器大小以降低网站的高度，则图像会出现偏差。倾斜时，您可以打开检查器并取消选中100％的高度，然后重新检查它，图像将快速恢复到正方形。

<html>
    <body>
        <div id=outer style='height:100vh'>
            <div style='height:50%'>
                <img style='height:100%;' src='https://i.pinimg.com/236x/0f/9a/36/0f9a36457c046fe12c2c69ad60a3e737--creative-thinking-texture.jpg' />
            </div>
        </div>
    </body>
</html>

https://jsfiddle.net/auey41fd/

这真的搞乱了我的Chrome用户网站。有谁知道一个好的工作？它不会仅在用户调整浏览器大小时发生。每当外部容器变得不那么高时，内部的图像就会变形。它并不特定于使用vh单位。在firefox和IE中一切正常。

Answer 1

将height更改为min-height。这应该可以解决你的问题。

Answer 2

将display: flex;放在图片上，使其保持不变。

Answer 3

此错误已由Chromium确认。 https://bugs.chromium.org/p/chromium/issues/detail?id=773445#c16 经过一年多的不尝试修复，他们重新编码了一些内容，然后无意中修复了它。

仅限Chrome中的图片偏斜错误

3 个答案: