分辨率不同图片大小会改变吗（如何在不同分辨率下，等比例显示图片，即图片自适应分辨率。）

时间2025-05-06 07:28:13分类IT科技浏览3922

导读：前言：用于展示生产线数据相关信息...

前言：用于展示生产线数据相关信息

在车辆生产线的小屏幕上【西门子的，比1980*1080的要小一圈，比pad要大一圈，专门给生产线做的】展示数据。数据用的flex布局，很简单的解决了自适应的问题。效果很好。

但，image展示的图片的宽高不匀称，比例不同。

这是开始的代码，只摘取了关键部分：

<body>  <div class="p"> <div id="container"> <img src="" class="box" alt="">  </div> </div> </body> body{ margin: 0; padding: 0; } #container { margin: 0 auto; width: 70%; height: 100%; /*临时布局用*/ /*border: 1px solid red;*/ } .box { display: block; width: 100%; height: 300px; position: relative; /*临时布局用*/ } .p { width: 100%; height: 100%; } $(function () { window.onload = onwindowresize; window.onresize = onwindowresize; }); //保存DIV大小 save_h1 = 0; save_w1 = 0; //窗体大小变化时调整缩放比例 function divresize() { //return; h = $(".box").height().toFixed(4); w = $(".box").width().toFixed(4); h1 = $("#container").height().toFixed(4); w1 = $("#container").width().toFixed(4); if (w1 != save_w1 || h1 != save_h1) { //div大小有变动，保持当前大小并变换显示比例 save_w1 = w1; save_h1 = h1; var ratioy = h1 / h; var ratiox = w1 / w; $(.box).css({ transform: scale( + ratiox + , + ratioy + ), transform-origin: 0 0, }); } }; var timer = 0; //计时器 function onwindowresize() { clearTimeout(timer); timer = setTimeout(divresize, 100); };

页面大小百分比不同，效果也不同，这并不是我想要的。后面是解决方案。

解决方案：

1.javascript的代码直接干掉，不需要

2.css中的.box的height的单位换成了vh ，其他没动 body{ margin: 0; padding: 0; } #container { margin: 0 auto; width: 70%; height: 100%; /*临时布局用*/ /*border: 1px solid red;*/ } .box { display: block; width: 100%; height: 50vh; position: relative; /*临时布局用*/ } .p { width: 100%; height: 100%; }

效果：

由此可见，vh单位实现了不同屏幕分辨率下，等比例显示图片。

单位解释 vw 1vw = 视口宽度的1% vh 1vh = 视口高度的1% vmin 选取vw和vh中最小的那个 vmax 选取vw和vh中最大的那个

由衷感谢以下两个连接的博主，要不是他们我也解决不了我的问题！！！

同时也复习了以下vh，vw 。

如果想进行延伸学习，可以看下下面的链接。也可以自行查询

[https://www.cnblogs.com/echolun/p/11354416.html](css 如何让大小不同的图片表现一致，同时自适应呢？)

https://juejin.cn/post/6844903494386712589

展开全文READ MORE

发布网站的流程图片（网站的发布流程是什么）