Question

任何人都可以告诉我如何在调整浏览器大小时调整图片大小，就像在https://login.microsoftonline.com/中完成一样我已经尝试使用css方法使用媒体查询。但我希望像微软一样快速调整图像大小。这就是我所做的http://codoc.testdrive.ch/Intranet

Answer 1

使用resize事件，如（普通Javascript）JavaScript window resize event或（jQuery）How can I detect window size with jQuery?中所述。然后设置所需的图像大小。

Answer 2

查看这篇精彩的resource，以便了解它是如何运作的。

您可以在不使用Javascript的情况下使用多种方法，例如将图像设置为100％。

img{    
width: 100%;
}

以下是demo您将看到图片如何变大或变小，具体取决于您调整窗口大小的方式

您还可以查看此demo

Answer 3

在不使用任何JavaScript的情况下，可以非常简单地在CSS中完成图片缩小的效果：

#image_id{
    width: 100%
}

微软所做的是实施“响应式设计”。这意味着该设计既“流畅”又“自适应”。

使用上面的代码可以实现流体部件。但是，自适应部分将需要媒体查询，就像您一样。结合这两者，你就会得到微软的效果。

以下是针对您的响应式设计的更多快速信息：