【问题标题】:html - Automatic zoom to different monitor sizeshtml - 自动缩放到不同的显示器尺寸
【发布时间】:2017-02-21 01:28:51
【问题描述】:

我一直想知道是否有办法根据显示器大小更改 html 网页的缩放比例。例如,500 像素 x 500 像素的图像在笔记本电脑上看起来很大,但在 PC 上使用显示器会使它看起来很小。有没有可能的解决方案我可以使图片随着显示器尺寸的变化而缩放? 另外,我希望屏幕只是缩放而不是像素变化。

谢谢!

【问题讨论】:

  • 这叫做响应式设计,你可以使用boostratp,非常好用(class :.img-responsive
  • @singebatteur 如果您想对另一个元素(例如画布)执行此操作会怎样?
  • 我不了解画布,但对于“经典”元素,您只需设置一个相对宽度,例如 50%,它将是 500px 的 50%,1920px 的 50% ...

标签: javascript html zooming


【解决方案1】:

您可以使用% 而不是px 来设置图像的大小。

在 HTML 4.01 中,宽度可以以像素或包含元素的百分比来定义。在 HTML5 中,该值必须以像素为单位。

来源:https://www.w3schools.com/tags/att_img_width.asp

或者在 CSS 中,您可以使用媒体查询根据使用的设备具有不同的样式。

【讨论】:

  • 如何动态更改大小,例如更改窗口大小?
  • 如果将大小设置为百分比,则对容器大小的任何修改都会按比例修改它。对于媒体查询,我邀请您阅读:w3schools.com/css/css3_mediaqueries.asp
  • 我的意思是缩放,而不是图像的大小。
  • 我不确定缩放对您意味着什么......“放大”意味着放大图像。您的意思是要放大图像的某些细节吗?或者您想在用户进行特定操作时进行缩放?
  • 我只是想让页面自动放大,这样在不同尺寸的显示器上的比例是一样的。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-03-02
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多