0

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

4

3 回答 3

1

查看这个很棒的资源，以便您了解它是如何工作的。

在不使用 Javascript 的情况下，您有多种选择，例如将图像设置为 100%。

img{    
width: 100%;
}

这是一个演示，您将看到图像如何根据您调整窗口大小的方式变大或变小

您也可以查看此演示

于 2013-06-19T04:48:12.823 回答
1

使用（纯 Javascript）JavaScript 窗口调整大小事件或（jQuery）如何使用 jQuery 检测窗口大小中描述的调整大小事件？. 然后设置你想要的图像大小。

于 2013-06-19T04:38:17.430 回答
1

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

#image_id{
    width: 100%
}

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

  • “流畅”是指图像尺寸随着屏幕变小而变化的事实。
  • “自适应”是指当屏幕变得太小时图像消失的事实。（页面布局发生变化。）

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

以下是有关响应式设计的更多快速信息：

于 2013-06-19T05:43:44.013 回答