关于CSS:奇怪的Chrome图像大小调整行为

Strange Chrome image resizing behaviour

在调整窗口大小时,关于调整图片大小,我在chrome上有一些奇怪的行为。

当Chrome在Windows中全屏捕捉(双击窗口以全屏捕捉),并且我取消捕捉窗口,导致其恢复为之前未捕捉的任何大小时,图像无法正确缩放。

例如,我有以下css代码,可将图像的大小调整为可用空间的100%高度,并自动将其宽度设置为:

1
2
3
4
img{
    height: 100%
    width: auto;
}

全屏捕捉窗口时,它看起来不错,图像的宽高比将保留。但是现在,如果我取消捕捉窗口(双击)。高度将调整大小,宽度将不会调整,如下所示:
Unsnap

在Internet Explorer中,取消捕捉如下所示:
Unsnapping


改为使用width:100%-> max-width:100%;

我曾经有过这个问题,并且我都使用过size

的两个属性

1
2
3
4
img{
    max-width:100%;
    max-height:100%;
}

对我来说效果很好,并节省了比例。